Nowadays, it is even more important that your WordPress website’s speed and loading time are fast as possible since speed is a ranking factor. This is due that Goggle and other search engines do realise that faster websites will have a better user experience (UX) than the slow ones. Let’s have look at it from the user’s perspective if a website is slow and has long loading times, you probably get bored and try another one. But WordPress isn’t the fastest CMS if you have tonnes of plugins or one of those premium themes with thousands of features.
So, getting better loading speeds to your site will grant you a better ranking, SEO, and also could reduce your bouncing rate and make visitors stay longer. As a website owner, this is a win-win scenario.
We talked while ago in some small changes that can make a difference in your website’ speed. Today, we will talk into another optimisation that can make a big improvement to make your website load faster using GZIP, also called browser or HTTP compression.
How does GZIP compression work?
Before I show you how to implement the GZIP compression, let me explain how it actually works.
Basic Website Architecture
When your visitors request to see the site, their browsers download these files from the server and render your site from the code contained in those files.
However, these files are coded by humans and to make them easy to understand are arranged in a way that makes and it is easy to spot bugs quickly. It’s one of the many reasons why WordPress has coding standards.
In the other side, machines like your browser don’t care about the code be pretty or legible. As long as they can understand it, it can be written in one block or line. That’s the reason why making the code concatenated and minified makes WordPress sites load faster.
All these words mean nothing else than taking away all the formatting to make the code more legible for people, like comments, line breaks, spaces, and such.
File compression takes the reduction in the size of these files even further.
To help understand how it works, we need to understand that the code generated in web development have lots of recurring patterns and elements. This is the nature of programming, any piece of code is at least somewhat repetitive.
GZIP is a compression algorithm that takes advantage of this by replacing those repetitive patterns with a shorthand.
On the very low level, Gzip is a library for compressing and decompressing data that works especially well for text-based content.
Nowadays, all browsers support GZIP and request it automatically first. This makes that enabling the algorithm in your WordPress site work on all modern browsers.
WordPress CMS is normally pretty slow if it is not well optimised. This is because all the plugins and theme files like images, styles or scripts.
How To Enable Gzip Compression For WordPress Websites
GZIP compression isn’t handled by WordPress itself but by the server. So, what I am going to explain here and the code below can be set and will work on any Apache server. As a WordPress developer, I prefer to get my hands dirty and add the code into the server file but there are other viable solutions even with a WordPress plugin.
But before doing anything, you should check if GZIP is already enabled in your server.
Check if GZIP is enabled
Especially if your website is hosted by a quality hosting provider, they might already offer Gzip compression as part of their standard service or have it already set up. Therefore, before you start making any changes, it may be a good idea to give them a call either way.
At Albiesoft, we use Check GZIP Compression website to check if compression is active for your website before continuing.
If GZIP isn’t enabled for our WordPress sites, we have the following options to enable it.
Ask Your Hosting Service Set It Up For You
As I explained, the most common way to enable the compression algorithm is through a server file. This server file sets different parameters in which control how browsers access to your server. This file, called .htaccess, is really important and it is important to note that a small mistake can put your server down.
Below, I will show you how to enable GZIP compression manually but if you don’t feel comfortable manipulating this sensitive file, some hosting companies will be able to do it for you.
However, if you feel uncomfortable implementing this yourself, you might be better off talking to your host instead. But, If it’s not enabled and you want to take care of it yourself, check the steps below. Don’t worry, it’s not rocket science.
Use A WordPress Plugin
WordPress wouldn’t be WordPress if there wasn’t some sort of plugin for all sorts of features. Enabling Gzip compression is one of them.
One of them is Check and Enable Gzip Compression, which is built for exactly this purpose. This plugin counts with more than 10,000 installs but has very mixed reviews and ratings and may not be the best option. Since it will be dealing with server configuration I wouldn’t risk using it.
Yet, don’t despair, there are other alternatives.
Number one is the caching plugin W3 Total Cache. This plugin is used for concatenating, compressing and caching from HTML files to CSS. It can also enable GZIP, under the Browser Cache settings, you can find a checkbox to add HTTP compression to your WordPress website.
Don’t forget to save your settings after enabling it!
Another option is its competitor, WP Super Cache. If you have it installed this plugin, 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.
Finally, a third (premium) caching plugin named WP Rocket not only gets a lot of good press but also comes with compression built in. At albiesoft, this is our preferred caching plugin and we use it in WordPress websites that we design, develop and maintain.
So, if you aren’t comfortable to add some code and your hosting company doesn’t include it, there are plenty of plugins you can choose from that will get the job done.
However, WordPress plugins are great but if you use so many, they could slow your site. So, you can still enable Gzip compression for your WordPress site by hand. This is how we do it.
Enabling Gzip Compression Manually
As mentioned earlier, the server file responsible for enabling this features is called .htaccess (including the dot). It is used for implementing access instructions to the server like for example, when you set up pretty permalinks in WordPress, the CMS adds rewrite rules to make this happen. Other things this file can do are redirects, protecting files and folders from access and including Gzip compression.
Find And Edit .htaccess
To be able to do any changes to your file. First, you will need to find it and this task isn’t that easy. This file is so important that is hidden by default so you will need to ensure that the FTP client is set to see hidden files. You can access the file through the cPanel but using FTP is way easier in our opinion.
In our case, we will start by opening our FTP client and connecting it to the server. .htaccess is usually found in the root directory of your website. However, as I mentioned, it is most often invisible.
At albiesoft, we use FileZilla as the main FTP Client. There you can easly set up the software to show hidden files under the Server tab.
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:
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/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/plain
AddOutputFilterByType DEFLATE text/xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0 no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
It doesn’t really matter whether you place the code inside or outside the # BEGIN WordPress and # END WordPress brackets, it will work either way. We actually place it always outside and before the WordPress block.
Save and upload your file and Gzip should be ready. However, in order to be sure, you should verify it’s actually doing its job.
Our Thoughts About Gzip Compression For WordPress
It should not be underestimated how much your site’s load speed can affect its popularity among visitors and search engines.
Page loading speed has become one of the most important signs of quality. Website owners should do their best to make their WordPress websites as fast as possible.
While there are many ways to speed up your WordPress website, Gzip compression is a simple yet effective tool that can make a huge difference.
Aside from that, if you want us to help you implementing GZIP or any other optimisation into your WordPress site you can always email us.
However, let us know if you tried enabling Gzip for your website? How did you do it? Any thoughts or additional tips? Please tell us about it in the comment section.