What compression does

Compression shrinks HTML, CSS and JavaScript before the server sends them, and the browser unpacks them again. It saves a large part of the transferred data and costs hardly any computing time.

How it works

With every request the browser says which methods it understands, for example Accept-Encoding: br, zstd, gzip. The server picks one, compresses the answer with it and names it in the Content-Encoding header.

  • gzip is understood by every browser.
  • Brotli (br) usually makes text a little smaller than gzip and is supported by all current browsers.
  • Zstandard (zstd) is the newest method and not yet supported everywhere.

Compression pays off for text: HTML, CSS, JavaScript, JSON and SVG graphics. Images in JPEG, PNG, WebP or AVIF and fonts in WOFF2 are already compressed; doing it twice gains nothing.

bytereport checks two things. If the HTML arrives uncompressed (and is larger than 1 KB), that is an error. If CSS, JavaScript or SVG files over 2 KB arrive uncompressed, you get a warning. Plain gzip is fine; Brotli would be a little smaller, but it is not a must.

What matters

  • Every text type. Often compression is only on for HTML. Add text/css, application/javascript and image/svg+xml to the list.
  • Files from other servers too. If CSS and JavaScript live on a separate server for static files or on a CDN, compression must be on there as well.
  • Brotli alongside gzip. The server then picks per browser. Files that don't change can be compressed in advance when the site is built.
  • Don't compress images. It only costs computing time.

How to set it up

On shared hosting your provider switches compression on, sometimes through .htaccess. CDNs usually compress on their own. On your own servers you enable it in the web server. In nginx, HTML is always included with gzip on;; Apache needs mod_deflate:

Web server
gzip on;
gzip_types text/css application/javascript text/javascript image/svg+xml application/json;
AddOutputFilterByType DEFLATE text/html text/css application/javascript image/svg+xml

For Brotli, nginx needs the additional ngx_brotli module, Apache mod_brotli with the BROTLI_COMPRESS filter instead of DEFLATE.

You can check it in your browser's developer tools: in the "Network" tab, each file shows the Content-Encoding header.

More on Server and network

Check your website now

The performance check shows where your page loses time and weight.

Check website