Back
Web Fundamentals

Text Compression: Gzip and Brotli

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
easyPerformance

Text Compression: Gzip and Brotli

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.

PropertyGzipBrotli
SpeedFastSlower compression
SupportUniversalModern browsers
Best ForDynamic content, broad compatibilityStatic 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
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
Previous TopicResource Hints: Preload, Prefetch & PreconnectNext Topic Image & Video Optimization: Modern Formats & Techniques

On this page