The Role of Gzip and Brotli Compression in Web Speed

Compression is one of the highest-ROI performance optimizations: 5 minutes of configuration can reduce transfer sizes by 70-90%. Yet many sites still serve uncompressed resources.

Gzip vs. Brotli

Feature	Gzip	Brotli
Compression ratio	Good	15-25% better
Compression speed	Fast	Slower (at high levels)
Decompression speed	Fast	Fast
Browser support	100%	97%+
Best for	Dynamic content	Static pre-compressed files

Recommendation: Use Brotli for static assets (pre-compressed at build time) and Gzip as a fallback for dynamic content.

Real-World Size Savings

Resource	Original	Gzip	Brotli	Savings
React bundle (500KB)	500KB	150KB	125KB	75%
CSS framework (200KB)	200KB	35KB	28KB	86%
HTML page (50KB)	50KB	12KB	10KB	80%
JSON API response (100KB)	100KB	15KB	12KB	88%

How Compression Works

1. Browser sends request with Accept-Encoding: gzip, br header
2. Server checks if compressed version is available
3. Server responds with Content-Encoding: br (or gzip) header
4. Browser decompresses and processes the resource

What Gets Compressed

Text-based resources benefit from compression:

• HTML, CSS, JavaScript
• JSON, XML, SVG
• Web fonts (WOFF2 already includes Brotli)
• Source maps

What Shouldn't Be Compressed

Already-compressed formats:

• Images (JPEG, PNG, WebP, AVIF)
• Videos (MP4, WebM)
• WOFF2 fonts (already Brotli-compressed)
• ZIP, PDF files

Server Configuration

Nginx

# Enable Gzip
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript
           text/xml application/xml image/svg+xml;

# Enable Brotli (requires ngx_brotli module)
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript
             text/xml application/xml image/svg+xml;

Apache

# Enable mod_deflate (Gzip)
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css
    AddOutputFilterByType DEFLATE application/json application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml image/svg+xml
</IfModule>

# Enable mod_brotli
<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css
    AddOutputFilterByType BROTLI_COMPRESS application/json application/javascript
</IfModule>

Cloudflare

Brotli compression is enabled by default on Cloudflare. Check: Speed → Optimization → Content Optimization → Brotli.

Vercel / Netlify

Both compress automatically with Brotli. No configuration needed.

Pre-Compression for Maximum Savings

For static assets, compress at build time with maximum compression levels:

# Pre-compress with Brotli (level 11 = max compression)
find dist -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" -o -name "*.svg" \) \
  -exec brotli -Z {} \;

# Pre-compress with Gzip (level 9 = max)
find dist -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" -o -name "*.svg" \) \
  -exec gzip -9 -k {} \;

Then configure your server to serve pre-compressed files:

# Nginx: serve pre-compressed files
gzip_static on;
brotli_static on;

Verifying Compression

Chrome DevTools

1. Open Network tab
2. Click a CSS or JS file
3. Check Response Headers for content-encoding: br or content-encoding: gzip
4. Compare "Size" (transferred) vs "actual size" columns

cURL

# Check Brotli
curl -H "Accept-Encoding: br" -I https://yoursite.com/app.js
# Look for: content-encoding: br

# Check Gzip
curl -H "Accept-Encoding: gzip" -I https://yoursite.com/app.js
# Look for: content-encoding: gzip

Monitor Compression Status

Missing compression on even one large file can significantly impact performance. BadPageSpeed flags uncompressed resources in your performance reports.

Monitor your compression →