Chapter 58: Asset Optimization & Delivery

HTTP Compression: Gzip vs Brotli

**Part 12: Performance & Optimization** — Chapter 58: Asset Optimization & Compression

LEARNING OBJECTIVES ⌵
  • Understand compression algorithms (Deflate/Gzip vs Brotli br).
  • Compare compression ratios and CPU decompression performance across HTML, CSS, and JS.
  • Configure web servers (Nginx, Caddy, Cloudflare) for static pre-compressed assets (brotli_static).
  • Inspect Accept-Encoding and Content-Encoding HTTP headers.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story

Compressing files over the wire is like packing luggage into vacuum-sealed space bags.

Gzip has been the industry standard since 1992. Brotli (developed by Google in 2015) uses a built-in static 120KB dictionary of common HTML, CSS, and JavaScript keywords (<div>, function, className, stylesheet). As a result, Brotli achieves 15% to 25% smaller file sizes than Gzip for text assets with identical decompression speed in browser engines!

Original bundle.js:   [========================================] 500 KB (100%)
Gzip Compressed:      [==============>] 135 KB (27%)
Brotli (br Level 11): [==========>] 105 KB (21%)  <=== 30 KB (22%) Smallest Payload! ⚡

Technical Deep Dive & Specifications

Server Configuration (Nginx Pre-Compressed Brotli)

For static production assets, pre-compress files at build time (Level 11) to avoid runtime server CPU spikes:

# Nginx Configuration
http {
    # Enable static pre-compressed files (.br / .gz)
    brotli_static on;
    gzip_static on;

    # Dynamic on-the-fly compression for HTML
    brotli on;
    brotli_comp_level 6;
    brotli_types text/html text/css application/javascript application/json image/svg+xml;
}

📌 Key Takeaways

  • Brotli (br) is supported across all modern browsers and outperforms Gzip by 15–25% on text assets.
  • Pre-compress static build assets at maximum Brotli level (11) during your build step (.js.br, .css.br).
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?

🏋️ Study Exercise

Task: Review the nginx example above. Identify the key directives and their purpose, then try writing your own version from memory.

# Nginx Configuration http { # Enable static pre-compressed files (.br / .gz) brotli_static on; gzip_static on; # Dynamic on-the-fly compression for HTML brotli on; brotli_comp_level 6; brotli_types text/html text/css application/javascript application/json image/svg+xml; }