Web Fundamentals

Text Compression: Gzip and Brotli

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
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
PreviousNext

Topic Guide

On this page