Compression (Gzip, Brotli)

What Is Compression

Compression is a technique where the server packs a file into a more compact format before sending it to the browser. The browser receives the compressed file, decodes it, and uses it. This reduces data transfer time, especially over slow connections. For text files (HTML, CSS, JS, JSON, WOFF fonts) the saving can be 60–80%.

Gzip vs Brotli

Gzip is the standard algorithm, supported by nearly all servers and browsers. Brotli is a more modern algorithm developed by Google, offering 10–20% better compression but slightly slower compression speed. Brotli is particularly good for text and fonts.

Modern best practice: enable Brotli for HTTPS traffic and keep Gzip as a fallback for older clients.

What to (Not) Compress

• Compress: HTML, CSS, JavaScript, JSON, XML, SVG (lossless), WOFF/WOFF2 font files (adding extra compression), text API responses.
• Do not compress: Already compressed formats — JPEG, PNG, WebP, MP4, WebM, ZIP (double compression offers no benefit and wastes CPU).

How to Enable Compression (Server Config)

# Nginx: enable Brotli (requires ngx_brotli module)
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml;
brotli_min_length 1000;

# Gzip as fallback
gzip on;
gzip_vary on;
gzip_types text/plain text/css application/json application/javascript text/xml;
gzip_min_length 1000;

# Apache (.htaccess)
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json application/javascript text/xml
  <IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI text/html text/plain text/css application/json application/javascript text/xml
  </IfModule>
</IfModule>

How to Check Compression

• Chrome DevTools → Network → select a request → Headers → Response Headers → `Content-Encoding: br` (Brotli) or `gzip`.
• PageSpeed Insights — will recommend enabling compression if it’s off.
• Online services — e.g., CheckGzipCompression.com.
• curl command — `curl -H "Accept-Encoding: br" -I https://example.com/style.css`

# Check via curl
curl -s -I -H "Accept-Encoding: gzip, deflate, br" https://example.com | grep -i content-encoding