GZIP Compression WordPress

How to Enable GZIP Compression in WordPress

GZIP Compression WordPress

Enabling GZIP compression on WordPress sites is one sure way of improving your website’s loading speed. 

When it comes to user experience and SEO  – loading speed is super important. The faster a website loads, the better it tends to perform. As such, speeding up your website should always be your priority.

Of the many ways of improving the loading speed of a website, enabling GZIP compression is one of the easiest. The technology has been around for over a decade now, and it is supported by most modern browsers.

Everything you need to know about this speed-boosting technique will be discussed in this article. On top of that, you would be able to enable GZIP compression on your WordPress website by the time you are done reading.

In this article:

What is GZIP Compression?

GZIP is a file compressing software which helps to reduce the size of a webpage before it’s served to a client (a browser). 

Essentially, GZIP works by breaking up heavy HTML, CSS, and Javascript files into smaller bits, thus reducing the time it will take a browser to load them. It doesn’t work on images, to learn about images, please read our image optimization guide.

The technology isn’t exclusive to WordPress, it works on virtually any website with a web server. So whether your website runs on WordPress, Magento, Drupal, etc. you can enable GZIP compression on it.

How It Works

When developers write the codes for a website, they add whitespaces, comments, page breaks etc. so as to make it easy for the human eyes to follow. The problem is, this formatting takes up space, and can significantly add to the size of a webpage. 

What GZIP does is to take away this formatting, because to browsers it means nothing. The end result is webpages compressed by as much as 80%.

Like earlier said, GZIP is supported by all modern browsers, so you don’t have to worry about compatibility problems. 

Ways to Check If GZIP Compression Is Enabled on WordPress

Some web host providers enable GZIP compression by default. So before going through the hassles of enabling it, it makes sense to first test if it’s been enabled. 

There are a couple of ways of running this test, but for this tutorial, we will be considering just two:

  • Using online checking tools
  • Google Chrome’s developer tool

How to Use Online Checking Tools

Using an online tool is the easiest way to check if file compression is enabled on your website. 

There are several checking tools online you could use, but for this tutorial, we will be using Varvy tool.

If file compression isn’t enabled on your website, it tells you instantly. Just copy and paste the URL to your website, and the rest is taken care of.

If it is enabled, it will you a breakdown analysis of your website

It’s that easy!

Using Google Chrome’s Developer Tool

If you use Google Chrome, you can readily check if GZIP is enabled on your website. To do so, open your website in Chrome and open developer tools with the keyboard shortcut Ctrl Shift I (Command Shift I   Mac). In developer tools, click on the Network tab.

Next, reload the page. After the reload scroll up in the developer tools section until you find your website’s URL at the left column.

Click on the URL once and switch to the Headers tab if you are in a different one.

Then scroll down using the vertical slider in this section until you get to the Response Header section. If GZIP is enabled, you will see:

content-encoding: gzip

If it’s not enabled, you will see

content-encoding: br

If it turns out file compressing isn’t enabled on your website yet, that can easily be fixed

How to Enable GZIP on Your Website

Enabling GZIP isn’t as hard as it might seem at the surface. There are a couple of ways to go about it, but we will be considering just 3, starting from the easiest.

Method #1 Contact Your Web Host Provider

GZIP is a technology that works on the server-side, and as such your web host provider is in the best position to help you out with it. So reach out.

Usually, they do this from their own end without you having to click a button. However, in some cases, they will provide instructions. It all depends on the provider, but by all means, reach out. 

Note that we recommend having your host enable this feature. Other solutions should only be used if there are issues with this method.

Method #2 Use a Plugin

In WordPress, there’s a plugin for virtually every task. Here are a couple of plugins that can help get the job done.

WP Super Cache

WP Super Cache, though primarily a caching plugin, also does a good job at compressing web files.

To start, first install and activate the plugin. Next, navigate to Settings >> WP Super Cache.

In the WP Super Cache page, click the Advanced tab. Then check the Compress pages so they are served more quickly to visitors option.

When you are done, scroll down and Update Status.

W3 Cache

W3 Cache is mostly known for its caching functionality. What you might not know is that with it, you can compress your web pages by as much as 80%.

There’s a video tutorial on the WordPress directory page of W3 Cache you can follow to enable file compression. 

Method #3 Edit the .htaccess files

This technique is somewhat technical, and if you are not careful you might break your website. Nonetheless, if you are confident in your abilities, by all means, give it a shot. 

To start, access your site using FTP. Once a connection has been established, click the public_html link at the top right section. Then at the bottom, scroll down until you locate the .htaccess file.

Right-click on the file, then click the View/Edit option.

Copy and paste the following lines of code into the bottom section of the Notepad editor:

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

When you are done pasting, save the file by hitting Ctrl (Cmd for Mac) + S.

Conclusion

The loading speed of your website can make or mar your site success, and so should be taken seriously. Enabling GZIP compression will really go a long way in making your website load faster.

In this article, we discussed three methods you could use to enable file compression on your website. Should you encounter any technical challenges along the way, do reach out to us.