Text Compression: Gzip and Brotli
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.
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.
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.
| Property | Gzip | Brotli |
|---|---|---|
| Speed | Fast | Slower compression |
| Support | Universal | Modern browsers |
| Best For | Dynamic content, broad compatibility | Static assets, best compression |
| Compression | ~70% | ~80-85% |
Gzip
Speed
Fast
Support
Universal
Best For
Dynamic content, broad compatibility
Compression
~70%
Brotli
Speed
Slower compression
Support
Modern browsers
Best For
Static assets, best compression
Compression
~80-85%
Common questions
- ›“What is the difference between Gzip and Brotli?”
- ›“How do you enable compression on your server?”
- ›“Which files should you compress?”
- ›“How do you verify compression is working?”
What interviewers look for
- Knowledge of compression ratios and trade-offs
- Practical server/CDN configuration awareness
- Understanding of what to compress vs not
- Verification techniques (DevTools, headers)
Short answer (60 sec)
Enable Brotli (preferred) or Gzip on your server/CDN for text files (HTML, CSS, JS, JSON). This typically reduces transfer size by 70-90%. Never compress already-compressed assets like images or videos.
Detailed answer (senior level)
Compression is applied automatically by the server when the client sends Accept-Encoding: gzip, br. Brotli gives better ratios but requires modern browser support (with Gzip fallback). Pre-compress static assets at the highest level. Verify in Chrome DevTools Network tab by checking Content-Encoding header and comparing Size vs Transferred columns.
- Compressing images, videos, or PDFs
- Forgetting to set proper MIME types for Brotli
- Using low compression levels on static assets
- Not verifying compression in production
- Assuming compression alone solves large JS bundles
- ✓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
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.