As a website owner, you probably understand the importance of website speed and page loading time. How quickly your website is available to visitors influences bounce rate, user experience, search rank (since speed is a ranking factor) and much more.
One of the most effective ways to make your site load faster is with Gzip compression, which is also sometimes called HTTP or browser compression.
If you work with a computer regularly, you probably already know about compression from zip archives. It’s a great way to reduce file size in order to make them easier to transfer.
The same is possible for the files that make up your WordPress website and there are good reasons to compress them as well. Smaller files allow your visitors to download them faster and see your site more quickly.
Not only does this improve the user experience and make you site more attractive to search engines, it also results in less server load and bandwidth usage, which is a good thing for performance-based hosting packages.
Reason enough to look at this topic in detail, don’t you think?
Me too. Therefore, in this article, I will show you several ways to enable Gzip compression in WordPress so that your site can be as fast as it deserves to be.
How Does Gzip Compression Work?
Before we dive into how to implement compression, let’s have a quick look at how it actually works.
First Things First, Websites Consist of Files
As you probably know, most modern websites consist of a mix of HTML, CSS, and JavaScript, which — on the very basic level — are nothing but text files. When visitors request to see your site, their browsers download these files and render the web pages from the code contained within.
So far, so good.
However, because the code is usually created and read by humans, it is arranged in a way that makes it easy to understand for human eyes. It’s one of the many reasons why we have WordPress coding standards.
However, machines like your browser don’t need code to be pretty or legible. As long as they can parse it, it can be in one block or a single line for all they care.
That’s the reason why a good way to make website’s load faster is code minification. This means nothing else than taking away all the formatting that is purely there to make code more legible for people, like comments, line breaks, spaces, and such.
As you can imagine, this saves a lot of space, which, in turn, makes the files smaller.
Compression Reduces File Size
Compression takes this even further. In order to understand how it works, we have to understand that all code is at least somewhat repetitive. It’s simply in the nature of programming and web design to have lots of recurring patterns and elements.
Compression algorithms like Gzip take advantage of this fact by replacing repetitive patterns with a sort of shorthand. To make this clear, let’s pretend we have a piece of code that looks like this:
AAA BBBB CCCCCWith a simple system we can reduce the same snippet to this:
3A 4B 5CEasy to understand, right? I just shortened the recurring characters by representing how often they appear with numbers. It’s simple and if you know the system, you can easily reprocess this back into its original form.
However, what’s also remarkable is that this small step reduced our code from twelve characters to merely six, which is a reduction of 50 percent. While that’s not actually how Gzip works, the idea behind it is very similar if much more complex.
Yet, on the very basic level, Gzip is nothing but a library for compressing and decompressing data and it works especially well for text-based content like lines of code. In fact, the algorithm can reduce the size of HTML, CSS, and JavaScript files by as much as 70 to 90 percent.
Since all modern browsers not only support Gzip but will actually request it automatically, this makes compression a fool-proof method to speed up your WordPress website.
A Practical Example
To show you what that means in real life, for this article I added Gzip compression to one of my own websites that was uncompressed before.
Here is what the situation looked like in the beginning:
And here is what I found afterwards:
As you can see, enabling Gzip for this WordPress site reduced the file size from 550KB to 343KB and shaved off half a second in loading time (that’s huge in Internet terms!).
Sure, there is a lot more to do but this is not bad for one simple change, right? Now let me show you how you can do the same for yourself.
How To Enable Gzip Compression For WordPress Websites
First off, you need to understand that WordPress does not handle compression itself but it’s something that happens on your server.
Therefore, you don’t typically set up this feature with a plugin but through a server configuration file (though you will see that here are plugin options as well).
This leaves us with the following ways for adding Gzip compression to WordPress websites.
1. Have Your Host Set It Up
As mentioned, the most common way to enable Gzip compression is through a sensitive server file. On Apache servers, which is what many of us use, that will be .htaccess. However, you will also find information for NGINX users below.
Most importantly, however, if you feel uncomfortable making any changes to your server yourself, you might be better off talking to your host instead. Especially if you work with a quality hosting company, they might offer Gzip compression as part of their standard service or have it set up already. Therefore, before you start making any changes, it may be a good idea to give them a call.
Alternatively, you can also use GiftofSpeed.com to see if compression is already active on your website before continuing.
If it’s not and you want to set it up yourself, move on to the steps below. Don’t worry, it’s far from rocket science.
2. Use A Plugin
WordPress wouldn’t be WordPress if there wasn’t some sort of plugin solution out there to set up Gzip compression. One of them is simply called Enable Gzip Compression, and that is exactly what it does.
Simply install the plugin, go to its settings page (Settings > Gzip Compression) and click the button to switch the compression on.
Worked like a charm in my test.
Alternatively, you can use the caching plugin W3 Total Cache. When installed, under Performance > Browser Cache, you can find a check box to add HTTP compression to your WordPress website.
Don’t forget to save your settings after enabling it!
Another plugin option is WP Super Cache. If you have it on your site, you can find an option to Compress pages so they’re served more quickly to visitors under Advanced.
Check it, save, and you have Gzip enabled on your site.
Users of WP Fastest Cache find the setting right on the first page of the plugin’s settings menu.
As you can see, there are plenty of solutions to choose from. However, even if you don’t opt for any of them, you can still enable Gzip compression on your WordPress site by hand.
3. Enable Gzip Compression Via .htaccess
Setting up compression directly on the server has several benefits.
For one, plugins come with a lot of data overhead which increases the risk of conflicts with other extensions and errors. Plus, if compression is all you are looking for, installing a large plugin with dozens of other functions doesn’t really make sense.
As mentioned earlier, the server file responsible for enabling this feature on Apache servers is called .htaccess (yes, including the dot). It also contains other instructions for the server. For example, when you use pretty permalinks in WordPress (as is the default by now), the CMS adds rewrite rules to .htaccess in order to make this happen.
Other things this file can do are redirects, protecting files and folders from access, and much more including Gzip compression. Here’s how to do the latter.
Find And Edit .htaccess
To make any changes to our file, you first need to find it. That’s not always easy, because it is hidden by default. The easiest way to access .htaccess is via FTP but you can also use cPanel or any other admin interface.
In this case, we will start by opening your FTP client of choice and connecting it to the server. .htaccess is usually located in the root directory of a website. However, as I mentioned, it is most often invisible.
In FileZilla, you can change that under Server > Force showing hidden files. However, your client might have the option somewhere else.
After you have located it, you can edit the file like any other. In FileZilla this means right-click and then View/Edit.
Alternatively, you may also download .htaccess to your computer and make changes on your hard drive. In fact, you should probably do that anyway in order to have a backup in place (safety first!).
If you go the download route, be aware that your operating system might also be hiding the file and you won’t see it unless you change your display options.
In Windows, these are located in the Folder Options. In that menu, find the View panel and then enable Show hidden files, folders, and drives.
Hit OK to save. Mac users can refer to these instructions to download and edit .htaccess.
Add The Necessary Code
Overall, enabling Gzip compression is not that challenging. All it takes is adding the following piece of code to the .htaccess file (thanks to GTmetrix for providing it!):
<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>Place it somewhere outside the # BEGIN WordPress and # END WordPress brackets.
While it will work either way, if you put the code inside the brackets, there is a chance WordPress will overwrite them.
In case you have problems with the code above (I will show you how to find out if Gzip is working in a second), you can also use the alternative below (both worked for my site).
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
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
AddType text/css .cssThat’s pretty much all it takes. Save and upload your file and Gzip should be ready. However, in order to be sure, let’s verify it is actually doing its job.
Verify Gzip Compression Is Working
Besides the aforementioned GiftOfSpeed.com, you have other tools at your disposal to make sure the change has taken effect, such as Google PageSpeed Insights and GTmetrix.
In all cases, all you need to do is input your URL and run the tool. After that, each one will tell you whether Gzip is active on your site or not.
However, the hint will show up in different places. In PageSpeed Insights check under Passed Rules (if it didn’t work, you will also get a recommendation to activate compression further up on the page).
GTmetrix tells you about Gzip compression in the PageSpeed or YSlow column:
You can also check your site manually. Open it with your browser developer tools and look under the Network section for Response Header. Here, it should say content-encoding: gzip.
If you don’t see a change right away, it doesn’t necessarily mean you made a mistake. It might just take some time for the compression to take effect (especially with larger sites) or for the site cache to be updated.
If everything works, congratulations! You just took a big step in speeding up your WordPress website.
4. Enable Gzip on NGINX
As mentioned, .htaccess is the configuration file for Apache servers. If your site resides on an NGINX server, you need to edit a file called nginx.conf instead and also add this code snippet to it:
gzip on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;
gzip_vary on;You can find more information in the NGINX documentation. Aside from that, everything else stays the same.
Additional Considerations
Be aware that your website likely consists of more than what is located on your own server. Most modern websites use at least some external assets, such as custom fonts, jQuery, or web analytics. You might also be using a Content Deliver Network (CDN) to deliver some files to your visitors.
To have your site load as fast as possible (and avoid getting a warning that it lacks Gzip compression), make sure that these assets are also compressed. You can check this with the same tools mentioned above, by inputting the URL where your external assets are located.
That way, you can make sure that your WordPress site is not a mixed bag when it comes to compression. By the way, reducing server requests of any kind to a minimum is another great way to make your site faster.
Gzip Compression For WordPress in a Nutshell
Never underestimate how much your site’s load speed can affect its popularity among visitors and search engines. Page loading speed is a sign of quality and smart website owners do their best to make their WordPress websites as fast as possible.
There are other ways to speed up your WordPress website, such as optimizing images and thoroughly testing your site to see what slows it down.
Yet, Gzip compression is a simple but effective tool that can make a huge difference. It is also easy to implement so there is no excuse not to take advantage of it. Your visitors and Google will both thank you.
Have you enabled Gzip for your website? How did you do it? Any thoughts or additional tips? Please tell us about it in the comment section!
98 Comments
Join the conversation