Brotli
A compression algorithm developed by Google that typically achieves 15-25% better compression than gzip for web content. Uses the "br" content-encoding. Supported by all modern browsers.
Full Explanation
Brotli beats gzip on compression ratio for pretty much everything—HTML, CSS, JS, JSON. The tradeoff is CPU time: Brotli at high compression levels (5-11) is significantly slower to compress than gzip. That's why most CDNs use Brotli at level 4-6 for dynamic content and pre-compress static assets at level 11.
The practical difference: a 100KB JavaScript bundle compresses to ~30KB with gzip and ~24KB with Brotli. That's 6KB less per request. Multiply by millions of requests and it adds up fast—both in bandwidth costs and load times.
Brotli includes a built-in dictionary of common web strings (HTML tags, CSS properties, JS keywords), which is why it's particularly good at compressing web content versus generic data.
Try the interactive Compression Comparison animation in the course to see how Brotli, gzip, and zstd compare on real content.
Interactive Animation
Examples
Enable Brotli in Nginx:
# Nginx (requires ngx_brotli module)
brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript application/json;
# Verify with curl
$ curl -H 'Accept-Encoding: br' -I https://example.com/style.css
Content-Encoding: br
Content-Length: 4521 # vs 5890 with gzipVideo Explanation
Frequently Asked Questions
A compression algorithm developed by Google that typically achieves 15-25% better compression than gzip for web content. Uses the "br" content-encoding. Supported by all modern browsers.
Enable Brotli in Nginx:
# Nginx (requires ngx_brotli module)
brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript application/json;
# Verify with curl
$ curl -H 'Accept-Encoding: br' -I https://example.com/style.css
Content-Encoding: br
Content-Length: 4521 # vs 5890 with gzipRelated CDN concepts include:
- Content-Encoding — An HTTP response header indicating the compression algorithm applied to the response body. Common values: …
- Vary Header — A response header that tells caches which request headers should be included in the cache …