Compression: gzip, brotli, what your server should send
You're not setting this in HTML β but you need to know it exists
Compression happens at the HTTP layer. The server compresses, the browser decompresses, you never see it in your code. But it's THE most important "free" performance win:
- gzip β 1992-era, widely supported. ~70% smaller than uncompressed text.
- brotli (br) β 2013, faster + smaller than gzip. ~80% smaller than uncompressed. All modern browsers support it.
Your stack should serve Content-Encoding: br for any text response > 1KB.
How to verify
Open DevTools β Network β look at any .html / .css / .js request β "Response Headers" tab. Look for content-encoding: br (or gzip).
If you see no content-encoding header on a text response, your server isn't compressing. That's a 4x bandwidth waste.
Defaults by host
- Vercel β brotli on, automatic.
- Cloudflare β brotli on, automatic.
- Netlify β brotli on, automatic.
- Custom Nginx β you need to install
ngx_brotlimodule + configure (gzip is built-in). - Apache β
mod_deflatefor gzip; brotli requiresmod_brotli.
What NOT to compress
- Images (
.jpg,.png,.webp) β already compressed at the file level. - Fonts (
.woff2) β already compressed. - Video β already compressed.
Compressing the un-compressible WASTES CPU. Configure your server to skip these MIME types.
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.