Lighthouse: Enable text compression

Overview

Enabling text compression allows you to serve smaller text-based resources like HTML, CSS, and JavaScript in the interest of faster file downloads.

The larger those files are, the longer it takes to download them, and the longer your visitors have to wait to view the content on your page.

How does enabling text compression affect page performance?

Simply put, smaller files sizes for text-based resources (i.e., CSS, JavaScript, and HTML) reduce your page weight, enabling them to be downloaded faster.

Faster downloads allow your visitors to view and interact with the content sooner.

Text compression essentially reduces the file size/payload of text-based resources, decreasing the amount of data transferred.

A compressed text-based resource is delivered to your browser faster.

There are 3 types of compression algorithms recognized by GTmetrix, namely:

• Gzip
• Brotli
• Deflate

Brotli and Gzip are the most commonly used compression algorithms and can reduce the size of resources/pages by up to 70%.

They have also been shown to reduce page load times by up to 50%, improving all the key metrics related to your Performance Score.

How does GTmetrix trigger this audit?

GTmetrix finds all uncompressed text-based resources on your page and flags any resource if it can be reduced by at least 10% or 1.4 KB.

GTmetrix will flag any resource on your page whose size can be reduced by 10% or 1.4 KB.

GTmetrix also estimates the file size savings possible through compression of the text resources.

How to enable text compression?

To enable text compression, follow the instructions below, depending on the web server used to serve your text-based resources:

1) For Apache servers

Copy and paste the following code into your .htaccess file:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

2) For other servers

Read the following guides to learn how to enable text compression on other server types:

• NGINX
• Microsoft IIS

3) For WordPress (or other CMS) Users

For WordPress users, the easiest way to enable Gzip compression is by using a caching plugin that supports enabling Gzip.

For example, WP Rocket is a caching plugin that automatically enables Gzip compression as soon as you activate the plugin.

Read this article for other ways to enable Gzip compression on WordPress.

Note that some plugins may rely on permissions to modify files on your webserver. If your caching plugin does not have permission, ask your host or use one of the aforementioned methods, depending on what server you use.