Enable WordPress gzip compression

One of the things you must do to make your website faster to is to enable WordPress Gzip compression. It is a crucial aspect because simply put, if you want your website to be faster, the size of the pages you need to serve to your visitors needs to be smaller.

Here is what the warning looks like on GTMetrix:

gtmetrix warning

Essentially what this does is this: it asks the server to compress all the files before sending them to the user. Since the files are smaller, they take much less time to get delivered to the user, resulting in an overall faster experience for your user. This is quite a high recommendation on Google PageSpeed Insights and is suggested on website optimization sites such as GTMetrix.

Page speed insights report suggesting compressing of files

Let's take you through the whole process of checking whether this function is enabled on your site. We'll then show you 3 ways of enabling or disabling it as necessary. 

  1. Enable WordPress Gzip compression via .htaccess files
  2. Enabling it via a WordPress Gzip compression plugin
  3. Compressing files across your websites using your hosting CPanel settings.

Check for GZip compression enabled

Before you actually go and do any changes, you probably want to check whether your site's gzipping files is already enabled for your WordPress site. There are quite a few other sites which can check whether you have it enabled using this tool or HTTP Compression test.

Run your site through the test.

Check WordPress gzip compression enabled

If you already have it enabled, you don't have to do anything. You'll get a nice result such as the below which shows you that your website. If not, read on.

 Succesful result

 

 

Alternatively, if you are using the Chrome browser, you can choose to check whether the GZIP Content Encoding header is present on your site. You can check this using the Dev tools under View > Developer > Developer Tools and switch to the Network tab. If you access the first request, and scroll down to the HTTP headers, you'll see something like the below if it is already enabled.

Chrome dev tools accept encoding

Now that you've determined how to check it, we'll show you a number of ways of how to enable it.

 

How to Enable GZip Compression in WordPress

It is very very simple to enable compressing of your files using built-in features of your web server - typically you only need to know the correct syntax to enable the functionality.

There are infact multiple ways to do this, so we'll show you a few and you can choose the one which you prefer or works best for you. Remember before making any drastic changes, it is recommended that you take a full WordPress backup.

1. Enable WordPress Gzip compression via .htaccess files

A simple way of enabling WordPress Gzip compression is by setting a few directives in your .htaccess file.

We've already seen ways of optimizing site speed by leveraging browser caching via your .htaccess file, so if you're comfortable messing around with your .htaccess file, then this is the method for you.

Do make sure you've made a backup of this file, because any small errors in this file will break your site and make it go down instantly. Make a copy of your current working version before attempting any changes so that you can go back to it if something goes wrong.

The below (and most of the options we are going to use) use the functionality of mod_deflate which is a module which is typically enabled on web servers powered by the Apache web server.

Add the following to your .htaccess file, via your hosting server's CPanel / File Manager

<IfModule mod_deflate.c>
  # compress text, html, javascript, css, xml:
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  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 font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon

  AddType x-font/otf .otf
  AddType x-font/ttf .ttf
  AddType x-font/eot .eot
  AddType x-font/woff .woff
  AddType image/x-icon .ico
  AddType image/png .png
</IfModule>

Once you've enabled the above, run your site through the test above again.

Of course, if you want to disable the function, you just drop the above lines from the htaccess file. If there are other files which you would like to compress, you'll need to add these files types too in a similar method to the above. 

NGINX and IIS

The syntax for doing this on Nginx is a little bit different than doing it for Apache using .htaccess. You'll need to add the following text to your nginx.conf file, which is the equivalent of the .htaccess file on NGINX.

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;

In IIS, i.e. the web server which runs on Windows Machines, it's best to do it via the IIS interface using this guide from Microsoft.

2. Enabling compression via a WordPress GZip plugin

Given that you're trying to make your website faster by enabling GZip compression, we've got great news for you.

There is one plugin WP Rocket - which not only enables compresses files to make them smaller, but does tens of more optimizations to make your website faster. Amongst a few things which it handles it will:

  • Enable GZIP compression (of course!)
  • Enable browser caching
  • Enable image optimization (to make the size of your images small and faster)
  • Enables lazy loading, such that images and other heavy images are only loaded when they are needed (on-demand)
  • Integrates with a CDN such that heavy resources can be served more efficiently
  • Removes any old, dead or unused plugins and tables
  • Enables file and database caching
  • and plenty of other optimizations

 

WP Rocket

The plugin is not free, but it's very well worth the investment in reality because a fast website is a great experience, not just for you, but most especially, for your visitors! Most of all, it's enabled literally in a few minutes and with a few clicks!

But before we go on, we've got a quick story to share. Up to a few months ago, our website was not as fast as we wanted it to be. We had been posting new content very often, but the site was a bit on the heavy side so it was taking some time to load. Sometimes taking 5 to 8 seconds or more to load.

And we weren't able to make it go faster no matter what we did.

One fine day we came across WP Rocket. We had been wasting so much time trying to make the site fast, that we just bit the bullet and got the plugin. BOOM - the site loading speed goes down to under 2 seconds!

(Update: The latest Google update has given our site a 30% increase in organic traffic - we believe that most of this has come from the boost in speed our site got thanks to WP Rocket)

Visit WP Rocket to make your website faster today

Not interested in this? Read on, there are other ways to do this of course!

If you want to use a way which is possibly less technical you can use a WordPress Gzip compression plugin. Simply put, rather than having to change files with the risk of possibly breaking your site if you make a mistake, a plugin makes it much easier to enable Gzip compression. You can either run a Google search for wordpress compression plugin or else go for the simple Gzip Ninja speed compression.

As with all WP plugins, this is a fairly straightforward procedure to install and activate the plugin. Once you've done that, your site should now have WordPress Gzip compression enabled

WordPress gzip compression plugin 

3. Enabling GZIP Page Compression via CPanel

Besides enabling GZip page compression at WordPress level, you can choose to do this at the server level - if available. This means that all websites hosted on your server would now be fully gzip enabled. 

Look for the "Optimize website" icon on your Cpanel and click on it.

Gzip compression server level - Optimize website icon in Cpanel

Once you are in the Optimize Website on CPanel, you can choose to "Compress All content". This asks your server to gzip compress the content before sending it to the visitor. Of course, if your WP site is hosted here, you can rest assured that your content is also WordPress gzip compressed.

Gzip compress all content

 

How to Disable

Disabling this feature is much is just a question of reversing the above changes. So you can either remove all of the additional codes which we added to our config files, disable the plugin, or disable the Optimize website feature is our CPanel. You'll then need to rerun the tests to check whether the compressing of files has been disabled.

 

 

Why Do We Enable This?

Just as a bit of background information, let's take a look at what happens behind the scenes when a visitor comes to your website and the browsers starts talking to the website web server.

Let's say you come to www.collectiveray.com/index.ghtml- your browser starts a "conversation" with the web server using the HTTP protocol which uses Requests and Responses.

HTTP request

  1. User Browser: Hey, can I GET the file /index.html
  2. Web Server: Ok, let me see if index.html is available …
  3. Web Server: Yes here it is (200 OK) I’m about to start sending the file which is about 50KB in size.
  4. User Browser: 50KB? Ok I'll wait for it… waiting, waiting… great, it’s loaded.

As you can imagine this is a simplistic view of what's happening, but if you want you can use the Chrome Dev tools which we described above to monitor exactly what is going in.

It works, and you get your file. This process happens over and over again, until you get all the files which make up the URL you requested.

But although the system works, sending 50KB of text is not very efficient. Keep in mind that this process happens several times, probably hundreds of times for each page you visit. And while 50KB may not sound like much, the cumulative effect of sending all the different files starts to build up. (Note that protocols such as HTTP/2 have significantly improved this process)

Truth be told, most text such as HTML, CSS and JS files in a website are inefficient in their nature because they are human-readable and made for consumption for both humans and machines - but they are not lean or efficient at all in their raw form.

So what can we do to make this process better? Zip it, of course! Zipping essentially is the process of encoding the file such that it makes the text to send smaller, without losing any of the information it contains.

And by sending a compressed version of the files we need to send, we're saving on both bandwidth and download time. The browser then unzips or decompresses the file and displays it to the user, who is happier, because the pages is loading quickly.

Let's have a look at what the new conversation between the web server looks like:

HTTP request compressed 

  1. User Browser: Hey, can I GET the file index.html? I’d be happy to use a compressed version if you have one
  2. Web Server: Ok, let me see if index.html is available …. I'll send you a compressed version then!
  3. Web Server: Yes here it is (200 OK) I’m about to compress the file which is about 5KB in size. Done, about to start sending it. 
  4. User Browser: Great! It’s only 15KB. I’ll decompress it and display it to the user.

As we've pointed out various times and it various articles, small pages which load fast = happy users!

The formula is simple: Smaller file = faster download = happy user.

Encoding Details

The important part of this exchange or conversation between the user browser and server is understanding that it’s fine to deliver a zipped file. The contract or agreement has two parts in it

  • The browser sends a header which shows the web server that the browser accepts compressed content (gzip and deflate are two compression schemes which are commonly available): Accept-Encoding: gzip, deflate

  • The web server sends a response if it is sending content which is actually compressed: Content-Encoding: gzip

The server may not actually send the content-encoding response header, which means the file was not compressed (this is the default behaviour on most servers). The “Accept-encoding” header is just the browser requesting that it accepts zipped files, not a demand. If the server hasn't got this feature enabled or doesn’t want to send back compressed content, the browser will use the regular uncompressed version.

Wrapping up 

You can easily achieve incredible saving by enabling WordPress gzip compression, as you can see we achieved up to 81% savings on the size of files. This is a great way to make your website much faster. If you want to take the easy way out, instead of messing up with files and codes, we recommend opting for a plugin such as WP Rocket.

Learn how WP Rocket makes your website faster

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

New! DIVI 3.1 WordPress Template + PageBuilder

You'll surely create a perfect website with Divi 3.1!

Get an exclusive 10% OFF for CollectiveRay visitors until

Divi 3

 

Monstroid2 (Updated!)

The best-selling template from TemplateMonster has been given an awesome upgrade!

We've got an exclusive 10% OFF for CollectiveRay visitors on Monstroid2 until - use Coupon Code: collectiveray

Monstroid2 Super Update

 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter