Compression
Compression reduces the amount of data that needs to be transferred between a server and browser.
Smaller responses generally require less bandwidth and can be delivered more quickly.
What It Means in Practice
Text-based resources such as:
- HTML
- CSS
- JavaScript
- JSON
- SVG
can often be compressed significantly before they are transferred across the network.
The browser then decompresses the response before using it.
Images, video, and other media use their own compression techniques and should also be optimized appropriately.
How It Works
The browser tells the server which compression methods it supports.
The server can then return an encoded version of the requested resource along with information describing how it was compressed.
Common HTTP compression methods include Brotli and gzip.
Compression changes how efficiently the resource is transferred, not what the resource contains after decompression.
Why It Matters
Reducing transferred bytes can make pages faster on limited or high-latency network connections.
It can also reduce bandwidth consumption.
Compression is particularly useful for large text resources such as JavaScript bundles, stylesheets, and HTML.
Common Problems
Common problems include:
- Text responses sent without compression
- Compressing resources that are already efficiently compressed
- Large JavaScript or CSS files treated as acceptable because compression makes them smaller
- Different compression behaviour between the origin server and CDN
- Focusing on transfer size while ignoring processing cost
A compressed 500 KB JavaScript file still needs to be downloaded, decompressed, parsed, compiled, and executed.
How to Improve
Enable appropriate compression for compressible responses.
Then continue reducing the underlying resource itself.
Compression works best when paired with techniques such as code splitting, image optimization, caching, and removing unnecessary resources.