Compressing HTML Pages with Gzip

HTML Compression with Gzip

HTML documents are highly compressible due to their tag-based structure. Gzip typically reduces HTML by 70–80%, which is critical for Time to First Byte (TTFB) optimization.

Why HTML Compresses Well

HTML documents have enormous repetition:

• Tag names: <div>, <span>, <p>, <a>, <li> appear hundreds of times
• Attributes: class=", id=", href=", src=" repeat throughout
• Class names: CSS frameworks produce long, repetitive class strings
• Structural patterns: Nested elements create recursive patterns

Real-World Example

Blog post page (server-rendered):
  Raw HTML:       85 KB
  Gzip (level 6): 18 KB  (79% reduction)
  Brotli (level 6): 15 KB (82% reduction)

Server-Rendered vs Static HTML

Type	Typical Size	Compressed	Notes
Static HTML	5–50 KB	1–12 KB	Pre-compress at build time
SSR (React/Next.js)	50–200 KB	10–40 KB	Compress on the fly
SSR with inline data	100–500 KB	20–80 KB	JSON data inflates raw size

Inline Scripts and Styles

Server-rendered pages often embed inline <script> and <style> blocks. These compress well together because gzip sees the entire HTML document as a single stream, allowing cross-section pattern matching.

Dynamic Compression Considerations

For SSR pages that change per request, gzip must run on every response. Use level 1–4 for dynamic HTML to keep latency low. For static HTML pages, pre-compress at build time with maximum compression.