Web compression and bundle optimization explained

Compression has different jobs

HTML, CSS, JavaScript and JSON are usually good candidates for lossless HTTP compression. Gzip, Brotli and Zstandard encode repetitive bytes efficiently; a client negotiates supported content encodings through Accept-Encoding and receives a matching Content-Encoding response.

Images, video and archives are different: JPEG, AVIF, WebP and already-compressed formats often gain little from another lossless text compression pass. Measure actual bytes rather than assuming every gzip result represents a useful saving.

A measured example, not a universal benchmark

The interactive engineering lab compares three generated repetitive text fixtures. Both raw and compressed lengths are calculated at build time using Node zlib, not invented chart data. They are intentionally very compressible, and may be unrepresentative of minified production bundles.

wc -c example.jsongzip -6 -c example.json | wc -cbrotli -q 6 -c example.json | wc -c# Measure encoding time and client decode cost separately.

Compression trade-offs

Compression ratio and CPU time are competing objectives. Brotli can perform especially well with static text assets; gzip is widely supported and may have lower encoding overhead for dynamic responses. Zstandard is also supported by modern delivery platforms, but browser/server negotiation and configuration matter. Avoid double-compressing and remember that transfer size is only one part of latency.

Other optimizations before adding more compression

Remove unneeded JavaScript, split code by real navigation boundaries, cache immutable hashed assets, load correct image dimensions and avoid rendering heavy graphs before they are needed. A smaller initial dependency graph may have greater user benefit than changing the compression algorithm alone.

• Inspect the production waterfall and transfer sizes
• Compare desktop and mobile under a representative connection
• Track JS parse/execute time in addition to download
• Cache immutable assets by content hash
• Use responsive images and avoid re-encoding already compressed assets

Validate the result at the edge

Cloudflare documents Gzip, Brotli and Zstandard support with configurable compression rules. Test real Accept-Encoding negotiation and ensure Vary behavior and cache policy are appropriate. Do not claim your site uses an encoding until the public response headers confirm it.

curl -I -H "Accept-Encoding: gzip, br, zstd" https://example.com/# Look for Content-Encoding, Cache-Control and Vary.# Compare actual transferred bytes from a real network client.

FAQ: does Brotli always win?

No. The best result depends on payload entropy, compression level, encode/decode cost and delivery path. For images and compressed archives a text codec may provide little benefit. A meaningful benchmark controls input content and records both CPU time and bytes on wire.