Web Fundamentals

Text Compression: Gzip and Brotli

easyWeb Fundamentals

Text Compression: Gzip and Brotli

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DREnable Brotli (best) or Gzip on your server/CDN. Compress text files only — never images or videos.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Text compression (Gzip and Brotli) is one of the highest-ROI performance optimizations. It reduces the size of HTML, CSS, JavaScript, and JSON by 70-90%, leading to faster downloads, better LCP, and lower bandwidth costs with almost zero downside when configured correctly.

You have the same items (code), but by removing unnecessary air (redundancy in text), they take up far less space in the suitcase (network transfer). Brotli is the better vacuum sealer — smaller result but takes a bit longer to pack.

Raw Text (HTML/CSS/JS)
Server Compresses (Gzip/Brotli)
Browser Decompresses Automatically
Much Smaller Transfer Size

1Gzip vs Brotli

Gzip is universally supported and fast. Brotli offers better compression ratios (usually 20% smaller) but is slightly slower to compress. Use Brotli for static assets and Gzip as fallback.

comparisontext
Gzip:   ~70% reduction, fast
Brotli: ~80%+ reduction, modern browsers

2Server Configuration

Enable compression at the server or CDN level. Most CDNs (Cloudflare, Vercel, Netlify) enable it automatically.

3Pre-Compression for Static Assets

Compress static files at build time (level 9 for Brotli) and serve .br or .gz variants for maximum efficiency.

4What to Compress & Verification

Compress only text-based files. Verify with DevTools (Content-Encoding: br or gzip) and bundle size comparisons.

Key Takeaways
  • ✓Enable Brotli + Gzip fallback on your server/CDN
  • ✓Compress only text-based files (HTML, CSS, JS, JSON, SVG)
  • ✓Pre-compress static assets at build time for best results
  • ✓Verify with DevTools: look for Content-Encoding: br/gzip
  • ✓Compression is one of the easiest high-impact wins
  • ✓Combine with code splitting and lazy loading for maximum effect