Gzip

Definition

Gzip is a widely supported compression method for text resources. Even if you prefer Brotli, gzip remains an important fallback to ensure broad compatibility and performance benefits.

Why it matters

• Dramatically reduces transfer size — text resources typically compress 60-80%, directly improving LCP and TTFB
• Highest compatibility — supported by all modern browsers and nearly all HTTP clients
• Especially effective for large JS/CSS bundles — 1MB can shrink to 300KB
• Reduces bandwidth costs — less transfer means lower CDN/bandwidth bills
• Improves mobile experience — compression benefits are more noticeable on slower mobile networks
• Essential fallback for Brotli — clients without Brotli support still benefit
• SEO signal — Google PageSpeed Insights checks if compression is enabled

How to implement

• Enable gzip at CDN/server level (usually a single setting)
• Set correct Content-Encoding: gzip response header
• Only compress text types: text/html, text/css, application/javascript, application/json, etc.
• Don't compress already-compressed formats (images, video, PDF) — wastes CPU and may increase size
• Use static gzip: pre-compress .gz files at build time to avoid runtime CPU overhead
• Combine with caching: compressed resources should be cached to avoid re-compression
• Test compression: use DevTools to verify Transfer Size vs Resource Size

Examples

# nginx.conf
http {
  gzip on;
  gzip_vary on;  # Add Vary: Accept-Encoding
  gzip_min_length 1024;  # Don't compress <1KB (not worth it)
  gzip_comp_level 6;  # Compression level 1-9 (6 is balanced)
  
  # Only compress these MIME types
  gzip_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/json
    application/xml
    image/svg+xml;
  
  # Serve pre-compressed .gz files when available
  gzip_static on;
}

# Check if response has Content-Encoding: gzip
curl -I -H "Accept-Encoding: gzip" https://example.com/bundle.js

# Should see:
# Content-Encoding: gzip
# Vary: Accept-Encoding

# Compare compressed vs uncompressed size
curl -so /dev/null -w '%{size_download}' https://example.com/bundle.js  # No compression
curl -so /dev/null -w '%{size_download}' -H "Accept-Encoding: gzip" https://example.com/bundle.js  # With compression