To achieve fast load times on your WordPress site, decreasing the size of your pages is crucial. This can mean the difference between a site that loads in under 1 second and one that feels like its crawling. Enabling GZIP compression can help reduce the size of your webpage, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.

All modern browsers support it and automatically negotiate GZIP compression for all HTTP requests.  Today we are going to share with you how to check and enable GZIP compression on your web server.

What is GZIP Compression?

GZIP is a file format and a software application used for file compression and decompression. GZIP compression is enabled server-side, and allows for further reduction in the size of your HTML, stylesheets, and JavaScript files. It will not work on images as these are already compressed in a different way. Some have seen up to 70% reductions due to compression. It is probably one of the easiest optimizations you could make when it comes to WordPress.

Compression is the process of encoding information using fewer bits. — Ilya Grigorik, Google

When a web browser visits a website it checks to see if the web server has GZIP enabled by seeing if the “content-encoding: gzip” response header exists. If the header is detected, it serves up the compressed and smaller files. If not, is serves up the uncompressed files. If you don’t have GZIP enabled, you will most likely see warnings and errors in speed testing tools such as Google PageSpeed Insights and GTmetrix.

GZIP Warning in Google PageSpeed Insights

As you can see, Google says that compressing resources with GZIP or deflate can reduce the number of bytes sent over the network.

enable compression warning pagespeed insights

Enable compression warning in Google PageSpeed Insights

GZIP Warning in GTmetrix

GTmetrix also has a recommendation to enable GZIP compression to reduce the transfer size of the static resources.

enable gzip compression gtmetrix

Enable GZIP compression warning in GTmetrix

How to Check if GZIP Compression is Enabled

GZIP is very common nowadays, and it is enabled by default on all Kinsta’s servers. You don’t have to worry about GZIP browser support, as many have supported it for over 17 years. Here is a list of browsers that can handle the “content-encoding: gzip” HTTP response header:

  • Internet Explorer 5.5+ (July 2000)
  • Opera 5+ (June 2000)
  • Firefox 0.9.5+ (October 2001)
  • Chrome (soon after launch in 2008)
  • Safari (soon after first launch in 2003)

If you are running on another WordPress host though, you should always check to ensure it is enabled, as server admins often overlook this optimization. There are a couple quick ways to check for GZIP compression:

1. Check GZIP Compression Tool

The first and quickest way to check if GZIP compression is enabled on your site is to simply head over to the free Check GZIP compression tool. Simply input your website and click search. It will return the amount that was saved by compressing the page with GZIP. Or it will return an error letting you know GZIP isn’t enabled. As you can see in our test below, we saved 66.9%.

check gzip compression wordpress

Check GZIP compression tool

And remember that GZIP also applies to your static assets as well. Which means if you are serving assets from a CDN, you will want to ensure they also have GZIP compression enabled. All modern CDN providers support GZIP compression, such as the Kinsta CDN, Cloudflare, KeyCDN, and CloudFront. You can also easily test this by simply running one of your CSS or JavaScript files on your CDN through the tool.

check gzip compression cdn

Check GZIP compression on CDN

2. GZIP content-encoding HTTP Response Header

The second way to check is to verify if the “content-encoding: gzip” HTTP response header is active on your site. This is what the browser looks for when it sends a request to the server. You can open up Chrome Devtools and look at your first response header under the network section.

check for gzip response header

content-encoding: gzip HTTP response header

You can also click on the “view large requests” option and it will show you the original and compressed size of the page. As you can see below the original page was 51.6 KB and the GZIP compressed version is 17.7 KB.

chrome devtools compressed size

View compressed page size in Chrome Devtools

How to Enable GZIP Compression

If you don’t have GZIP compression enabled, there are a couple of ways you can go about enabling it on your web server.

Enable GZIP with WordPress Plugin

The first and one of the easiest is by using a caching plugin that supports enabling GZIP. WP Rocket, for example, adds GZIP compression rules in your .htaccess file automatically using the mod_deflate module. W3 Total Cache also has a way to enable this for you under it’s performance section. Even though these are plugins, this still relies on permissions to modify files on your webserver. If your caching plugin doesn’t have permission, you will need to ask your host or use a snippet of code below.

Enable GZIP on Apache

The second way to enable Gzip compression is by editing your .htaccess file.  Most shared hosts use Apache, in which you can simply add the code below to your .htaccess file. You can find your .htaccess file at the root of your WordPress site via FTP.

Important: Make sure mod_filter is loaded on your server, otherwise the AddOutputFilterByType directive will not work and could cause a 500 error. We recommend checking your error logs if you have any issues with the code below.

<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>

Ensure that you add it below the current contents of your .htaccess file. Example below:

add gzip code

Example of GZIP Apache .htaccess code

Enable GZIP on NGINX

If you are running on NGINX, simply add the following to your nginx.conf file.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Enable GZIP on IIS

If you are running on IIS, there are two different types of compression, static and dynamic. We recommend checking out Microsoft’s guide on how to enable compression.

133
Shares