Gzip and Brotli Compression: Reduce Your Website's Weight

What is web file compression

Compression is one of the most effective techniques to speed up website loading. When a browser requests a page, the server can compress the files before sending them, drastically reducing the amount of data transferred over the network. The browser then decompresses the files instantly before rendering them.

To give you an idea of the impact: a 100KB HTML file can be reduced to just 15-20KB after compression. For CSS and JavaScript, the reduction can reach 60-80%. On a site with 2MB of resources, compression can reduce the transfer to less than 500KB, a 4x improvement in download time.

Gzip: the established standard

Gzip is the most widely used compression algorithm on the web, supported by 100% of modern browsers. Developed in the 1990s, it is reliable, fast, and efficient:

• Average reduction of 70% in size for text files (HTML, CSS, JS, JSON, XML)
• Fast processing for both compression and decompression
• Supported by all web servers (Apache, Nginx, IIS, Node.js)
• Simple setup: usually just enable a server module

How to enable Gzip

Enabling it depends on your server:

• Apache: enable the mod_deflate module and configure in .htaccess which file types to compress
• Nginx: add the gzip on directive in the configuration file with the desired MIME types
• WordPress: plugins like WP Rocket and W3 Total Cache enable Gzip automatically
• Shared hosting: most already have Gzip enabled by default, but it's worth checking

Brotli: next-generation compression

Developed by Google and released in 2015, Brotli offers superior compression rates compared to Gzip:

• Files 15-25% smaller than the Gzip equivalent
• Supported by more than 97% of current browsers
• Especially efficient for web content, as it uses a dictionary of common terms in HTML, CSS, and JS
• Requires HTTPS (which every site should have)

The downside of Brotli is that real-time compression is slower than Gzip at higher levels. Therefore, the recommended practice is to use pre-compressed Brotli for static files (generated once during the build) and Gzip or low-level Brotli for dynamic content.

Gzip vs Brotli: which to use?

The best approach is to use both. Configure your server to offer Brotli as the first option and Gzip as a fallback. The browser indicates in the request header which algorithms it supports, and the server chooses the best available. This way, modern browsers receive Brotli (smaller), while older browsers receive Gzip (universal).

What to compress (and what not to compress)

Compression works best on text files. Compressing already compressed files is useless or even harmful:

• Compress: HTML, CSS, JavaScript, JSON, XML, SVG, WOFF fonts (but not WOFF2, which is already compressed)
• Do not compress: JPEG, PNG, WebP, GIF, videos, PDFs, ZIP files, as these formats already use internal compression

Compressing already compressed files wastes server CPU without reducing size, and may even slightly increase it.

Checking if compression is active

To verify if your site is using compression:

• Browser DevTools: in the Network tab, compare the "Size" column (transferred size) with "Resource Size" (actual size)
• GTmetrix: identifies if compression is active and how much could be saved
• HTTP headers: look for Content-Encoding: gzip or Content-Encoding: br in server responses

Conclusion: compression is mandatory

There is no reason not to use compression on a website. It's free, easy to configure, and offers immediate and significant performance gains. If your site doesn't use Gzip or Brotli yet, this is likely the fastest and most impactful optimization you can make today. Enable compression and drastically reduce your website's weight.