Gzip compression in WordPress without a plugin [how-to]

Gijs Hovens, December 21, 2018

You are right. Using Gzip to compress your website assets like HTML, CSS and JavaScript is a good idea. Gzip makes these files smaller. Smaller files are faster to download, increasing the speed of your WordPress website. We will go into more detail on what Gzip is, how to check if your website uses it and how to make sure you enable Gzip compression in WordPress without a plugin if your website doesn’t use it yet.

  1. Check if Gzip is enabled
  2. Enable Gzip
  3. Check your file size savings

What is Gzip compression for WordPress?
First of all, Gzip compression is not specific for WordPress websites. Gzip is a method to compress files before a server sends them to a client (visitor). Smaller files equal faster downloads. The same method is used by your browser to decompress the files. Gzip compression can reduce file size up to 90%!

The web server does not store Gzipped versions of files (like you might do with .zip files on your computer) but compresses them when a file is requested by a client. The time this takes is so short that the benefits of faster downloading outweigh this disadvantage.

Gzip is supported by all major browsers.

Check if Gzip is enabled

You can check if Gzip is enabled in three different ways: using Google PageSpeed Insights, use an online check and checking your headers. If you see that Gzip is enabled, you can skip to Step 3: Check your file size savings.

Option A: PageSpeed Insights

Most people encounter their first mention of Gzip through a test with Google PageSpeed Insights. If you have Gzip enabled Google will state:

“Enable compression
You have compression enabled. Learn more about enabling compression.”

If you don’t have Gzip enabled, Google will state:

“Enable compression
Compressing resources with Gzip or deflate can reduce the number of bytes sent over the network.”

Followed by a list of assets and possible savings in file sizes by compressing them.

Option B: Use an online Gzip check

Even easier is using the website GiftOfSpeed. Just fill in your domain name and go! We don’t recommend using a WordPress plugin to check your Gzip status, this is the hard way and installing useless plugins is never a good idea.

Option C: Check your headers for Gzip compression

A harder but more comprehensive way is to use your browsers dev tools to check the headers. Look for the line called ‘content-encoding’ in the Response Header. If Gzip is enabled it will show ‘Gzip’ (duh).

WordPress gzip headers

This method will also allow you to easier inspect elements that are hosted with a CDN or assets from external sources (like tracking scripts, ads, etc.). If you go to the network tab and check the size column, you will see compressed file size in black and the original size in grey.

Enable Gzip

First of all, all good web hosting companies should have Gzip enabled by default. Strongly consider switching hosts if they do not, speed will probably be suffering from other server settings as well.
All forms of enabling Gzip require permission to modify some specific files. The WordPress plugins WP Rocket and W3TotalCache can enable Gzip for you by modifying these files under the hood. It depends on your server settings if they are able to do this. In short, you have two options to enable Gzip:

Option A: Find a host that has Gzip enabled by default.

Since we care for speed we have Gzip enable for all websites hosted at Savvii.

Option B: Change your server settings

We will list instructions for Apache and NGINX. At Savvii we use NGINX. When you are hosting at Savvii, Gzip is enabled by default and you can just sit back and check your savings.

Make sure you are able to edit the .htaccess file. Paste the following lines in your .htaccess files AFTER all other lines in your file. Also check if you have the module ‘mod_filter’ loaded, otherwise compression will not work and give a 500 server error instead. As you can see, these rules specifiy the file types where Gzip will be applied and make sure that you keep compatibility with some really old browsers.

<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

For nginx it is even less work. Just paste the following lines in your nginx configuration 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;

Same as with apache, you specify the file types where Gzip will be applied and you make sure that you don’t use Gzip for some really ancient browser versions.

Check your file size savings

After changing hosts or modifying your web server settings to use Gzip you should check your savings. The easiest way is to use the website GiftOfSpeed. This website will give you stats on the reduction in total file size.

For Savvii.com we achieved a reduction of 77% in file size by using Gzip.

Gzip compression savings 77%

If you are looking for more WordPress speed improving tips, please read our other articles on load time. You can also ask our experts to have a look at your website.

Leave a reply