How Compression Works on the Web with Gzip and Brotli

#backend #performance #webdev

When a browser loads a website, it downloads HTML, CSS, JavaScript and other text based files. These files can be large which makes websites load slowly on slow networks. To solve this problem servers compress files before sending them to the browser. The browser then decompresses them and shows the page normally.

Two popular compression formats used on the web today are Gzip and Brotli.

What is Gzip

Gzip is one of the oldest and most trusted compression formats for websites. It was introduced in the 1990s and is still supported by almost every browser and server. When a browser sends a request it sends a list of compression formats it supports using the Accept-Encoding header. If Gzip is one of them the server compresses the response using Gzip and the browser handles the rest.

Gzip is simple and reliable which is why many hosting providers enable it by default.

What is Brotli

Brotli is a newer compression format created by Google. It was designed specifically for the web. It uses more advanced techniques to squeeze files even smaller than Gzip. Smaller files mean faster loading times and less data used on mobile networks.

Modern browsers such as Chrome, Firefox, Edge and Safari already support Brotli. Most major CDNs also support it.

Performance Comparison

Here is a simple summary of how they perform in most cases

Format	Compression Speed	Decompression Speed	File Size
Gzip	Fast	Fast	Medium
Brotli	Slightly slower when compressing	Fast	Smaller than Gzip

Brotli usually produces smaller output but it takes more time to compress especially at higher compression levels. That is why most websites use Brotli for static files like JavaScript and CSS which are compressed once and served many times. For dynamic pages that are generated for each request Gzip might still be faster.

How to Choose

Here is a simple rule

If your server or CDN supports Brotli, enable Brotli first and keep Gzip as a fallback.
If your server does not support Brotli, Gzip is still perfectly fine.

Many servers follow this technique

Check if the browser supports Brotli. If yes respond with Brotli.
If not check for Gzip.
If neither is supported send the original response.

Real World Impact

A typical JavaScript bundle of 300 KB might become

90 KB with Gzip
75 KB with Brotli

This difference looks small but when you include all files on a page it adds up. On slow connections every kilobyte matters.

Final Thoughts

Gzip has served the web for decades and still works well. Brotli is the modern and more efficient replacement. The best approach is to use both. Give Brotli to browsers that support it. Use Gzip for older ones.

You do not need to pick only one. Most CDNs and hosting services already provide both options. You only need to make sure the feature is enabled.

Faster websites make happier users. Compression is one of the easiest ways to achieve it.

If you’ve ever struggled with repetitive tasks, obscure commands, or debugging headaches, this platform is here to make your life easier. It’s free, open-source, and built with developers in mind.