Compression: Ship Less Data Over the Network

HTTP compression (gzip/brotli) reduces transfer sizes for text assets.

Why It Matters

Smaller payloads load faster, especially on slower mobile networks and high-latency connections. Compression improves download time for the first HTML response and supporting text assets, which can improve both perceived speed and Core Web Vitals.

Compression benefits are typically strongest for:

  • HTML documents
  • CSS and JavaScript bundles
  • JSON/API payloads
  • SVG and other text-like assets

When transfer size drops, browsers receive render-critical files sooner and the page reaches usable states faster.

Brotli vs Gzip

  • Brotli (br) usually provides better compression ratios than gzip for text assets.
  • Gzip (gzip) remains a strong fallback and has universal support.
  • In practice, serve Brotli when the client advertises it, and fall back to gzip otherwise.

Most production stacks support content negotiation automatically through Accept-Encoding.

Best Practices

  • Enable Brotli and/or gzip for HTML, CSS, JS, JSON, XML, and SVG.
  • Prefer Brotli for HTTPS traffic when available.
  • Keep gzip enabled as a fallback for older clients/proxies.
  • Avoid compressing already-compressed assets (JPEG, PNG, GIF, MP4, PDF, ZIP, WebP, AVIF).
  • Set sensible minimum-size thresholds to avoid CPU overhead on tiny responses.
  • Ensure CDN, reverse proxy, and origin do not conflict or double-compress responses.
  • Verify caching behavior with Vary: Accept-Encoding where needed.

Common Misconfigurations

  • Compression enabled at origin but stripped at CDN edge.
  • Static files compressed but dynamic HTML responses left uncompressed.
  • Only gzip enabled when Brotli support is available.
  • Compressing binary files and wasting CPU with little transfer gain.
  • Missing validation after deployments or infra changes.

Practical Validation

Use header checks and compare transfer sizes in DevTools network panel:

  • Confirm Content-Encoding: br or Content-Encoding: gzip.
  • Compare resource size vs transferred size.
  • Test critical endpoints: homepage HTML, main CSS/JS, key API routes.
  • Validate in production, not only local development.

Quick Check

curl -I -H "Accept-Encoding: br,gzip" https://example.com

Look for:

  • Content-Encoding: br or Content-Encoding: gzip
  • Vary: Accept-Encoding (when applicable in your caching setup)

You can also test a specific asset:

curl -I -H "Accept-Encoding: br,gzip" https://example.com/build/app.css

Prioritized Action Plan

  1. Enable Brotli and gzip for all text responses.
  2. Verify compression for HTML, CSS, JS, and API JSON in production.
  3. Exclude pre-compressed binaries from compression rules.
  4. Validate CDN/proxy/origin layering to avoid conflicts.
  5. Re-check performance metrics after rollout.

Quick Checklist

  • Brotli enabled for text assets where supported.
  • Gzip fallback enabled.
  • HTML responses are compressed in production.
  • Binary assets excluded from compression.
  • CDN and origin compression behavior verified.
  • Transfer-size improvements confirmed in DevTools.

Final Takeaway

Compression is a straightforward, high-impact optimization that reduces network cost and improves real-world load experience. Proper Brotli/gzip configuration is one of the fastest wins for launch readiness.