Enable text compression

Text-based resources should be served with compression to minimize total network bytes. The Opportunities section of your Lighthouse report lists all text-based resources that aren't compressed:

A screenshot of the Lighthouse Enable text compression audit

How Lighthouse handles text compression

Lighthouse gathers all responses that:

  • Have text-based resource types.
  • Do not include a content-encoding header set to br, gzip, or deflate.

Lighthouse then compresses each of these with GZIP to compute the potential savings.

If the original size of a response is less than 1.4KiB, or if the potential compression savings is less than 10% of the original size, then Lighthouse does not flag that response in the results.

Enable text compression on your server

Enable text compression on the server(s) that served these responses in order to pass this audit.

When a browser requests a resource, it will use the Accept-Encoding HTTP request header to indicate what compression algorithms it supports.

Accept-Encoding: gzip, compress, br

If the browser supports Brotli (br) you should use Brotli because it can reduce the file size of the resources more than the other compression algorithms. Search for how to enable Brotli compression in <X>, where <X> is the name of your server. As of December 2022 Brotli is supported in all major browsers except Safari on iOS. See Browser compatibility for updates.

Use GZIP as a fallback to Brotli. GZIP is supported in all major browsers, but is less efficient than Brotli. Refer to Server Configs for examples.

Your server should return the Content-Encoding HTTP response header to indicate what compression algorithm it used.

Content-Encoding: br

Check for response compression

To check if a server compressed a response:

Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools. Click the Network tab.

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Network tab.
  3. Click the request that caused the response you're interested in.
  4. Click the Headers tab.
  5. Check the content-encoding header in the Response Headers section.
The content-encoding response header
The content-encoding response header.

To compare the compressed and decompressed sizes of a response:

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Network tab.
  3. Enable large request rows. See Use large request rows.
  4. Look at the Size column for the response you're interested in. The top value is the compressed size. The bottom value is the decompressed size.

See also Minify and compress network payloads.

Stack-specific guidance

  • Drupal: Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Consider using a CDN that natively supports this, or configure the web server to perform this operation. Learn more.
  • Joomla: Enable the Gzip Page Compression setting (System > Global configuration > Server).
  • WordPress: Enable text compression in your web server configuration.

Resources