Your CDN is likely serving static assets without compressing them, meaning users download larger files than necessary, slowing down page loads.
Let’s see this in action. Imagine a user requests https://your-cdn.com/styles.css.
Without compression, the server sends the entire styles.css file. The browser receives it, decompresses it (if it was compressed by the origin, which is a separate issue), and then applies the styles.
With compression enabled on the CDN, the CDN intercepts the request. If the asset is eligible for compression (e.g., text-based), it compresses it before sending it to the user. The browser receives a smaller, compressed file, decompresses it, and applies styles. The key is that the CDN does the heavy lifting, saving the user’s bandwidth and time.
Here’s how it works internally. When a request hits the CDN edge server, the CDN checks its cache and the asset’s Content-Type header. For text-based assets like HTML, CSS, JavaScript, and fonts, it can apply compression.
- Gzip: A widely supported compression algorithm. It’s like a universal translator for making files smaller.
- Brotli: A more modern and efficient compression algorithm, especially for web assets. It offers better compression ratios than Gzip, meaning even smaller files.
The CDN determines which algorithm to use based on the Accept-Encoding header sent by the user’s browser. If the browser supports Brotli, the CDN will try to serve Brotli-compressed assets. If it only supports Gzip, it will serve Gzip-compressed assets. If it supports neither, it will serve the uncompressed asset. The CDN typically stores both compressed and uncompressed versions of assets in its cache, or compresses them on-the-fly if not already cached in a compressed form.
The primary levers you control are:
- Enabling the feature: Most CDNs have a simple toggle for Gzip and Brotli compression.
- Configuring eligible file types: You can often specify which
Content-Typeheaders should trigger compression. While defaults are usually good, you might want to include specific font types or custom asset types. - Compression level (less common): Some CDNs allow tuning the compression level, trading CPU usage for file size. Higher levels mean smaller files but more processing on the edge.
Consider this scenario: your CDN is configured to compress .js and .css files but not .svg files. An SVG file, while often text-based and compressible, might not be on your list. If you upload a large SVG logo, it will be served uncompressed. Adding image/svg+xml to your list of compressible content types would ensure this SVG is compressed, reducing its download size significantly.
The surprising benefit of Brotli is its performance on highly repetitive text, which is common in minified JavaScript and CSS. While Gzip is good, Brotli can often achieve 10-20% better compression ratios on these types of files.
The next step in optimizing asset delivery is understanding and implementing Cache-Control headers to maximize cache hit ratios on your CDN.