Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Enable GZIP Compression in WordPress

How to Enable GZIP Compression in WordPress

There is a myriad of factors which can affect user experience. The major one is likely content, but even top-notch content may not be enough if your website scores poorly in terms of user experience. Don’t worry, though: a lot of things can be done in terms of improving user experience. Some of them, like ease of navigation, are a little abstract (if they work well, nobody will notice them), and some, such as website accessibility, may even involve redesigning some of your website’s features. Website speed is one of the former.

In this article, we will be discussing a way to improve your website speed: GZIP, and show you how to implement it in WordPress. But what is GZIP compression? How does it work? Does your website really need it? We will be answering all of these questions in the article below. Here are the topics we will be touching upon in our exploration of GZIP and WordPress:

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

What Is GZIP Compression

The clue is in the name: it is a way of compressing data – in this case, website data – making it smaller and therefore faster to load. But that doesn’t answer the main thrust of the question.

Data compression itself is well beyond the scope of this article, but for the purposes of addressing GZIP in particular, we will say that preferred methods of compression largely depend on the type of data you want compressed. You wouldn’t use the same methods to optimize images and minify CSS and JavaScript, for instance, but the purpose is the same.

GZIP is short for GNU Zip, and is currently the most popular lossless compression algorithm. It works advanced mathematical magic and can compress any file type, but works best with HTML, CSS, JavaScript, and other text-based files.

Apart from being an algorithm, it is also a piece of software used for compression and decompression, and a file format. The file resulting from GZIP compression typically has .gz for its suffix.

As for how it works, we can’t go very deep into that without getting too technical. We will say that it uses an algorithm called LZ77 to detect redundancies (repeated places in the text) and replace them with ordered sequences of elements known as tuples in mathematics. It then uses another algorithm known as Huffman coding to compress the result even more, reencoding more frequent characters with fewer bits than those less frequent.

This combination of LZ77 and Huffman coding creates the .gz file mentioned above. The resulting file may be reduced down to 10% of the original’s size, though this varies.

Why Use GZIP Compression

If you are not convinced by the possibility of reducing your file sizes (and, consequently, loading speeds), let us discuss some additional benefits of GZIP.

First, you should take note that, in order to display the website to a user, the browser has to decompress the .gz file in order to execute it. And, while GZIP may not be the most efficient method of storing data, its combined algorithms are so refined as to be by far the fastest yet developed, both ways: compressing and decompressing. So, while there may be more efficient ways of making your files smaller, you could still lose out on the loading speed.

Secondly, it is free and open source. This means that it does not require a paid license agreement to use. It was originally developed as a free alternative to paid solutions, which is part of the reason why it is so widespread.

Thirdly, it is resistant to entropy encryption. If a file is already efficiently organized or very small, applying a compression algorithm to it can result in increasing the size of the file, rather than the other way around, as the encryption dictionary gets added to it. With GZIP, this rarely happens, and the effects are not as adverse as with some other compression algorithms.

Finally, the compression itself: while there are more efficient algorithms in terms of file size reduction, GZIP is still very efficient in that respect, being capable of reducing textual file sizes by 70 to 90%.

It is therefore no surprise that GZIP sees widespread usage in various fields, from image compression (such as in .png) through console gaming, where every bit and hertz count, all the way to some of the most popular operating systems. In terms of application to websites, GZIP can improve your website’s loading speed significantly, resulting in positive effects on your SERP ranking and user experience.

How to Check Whether GZIP Compression Is Already Enabled

Since GZIP is so widely used and supported, many hosting providers enable it by default. Still, it may happen that GZIP compression is not used on your server.

To check that, you can use any number of online tools. For this demonstration, we have opted for Sitechecker Pro’s GZIP checker. Simply follow the link, enter the URL for which you wish to check GZIP compression, and click the arrow icon. We have gone with Qode Magazine’s URL.

Sitechecker Pro’s GZIP checker

As you can see, GZIP compression is enabled. Sitechecker will also inform you of how efficient the compression was. In our case, it is over 90%.

GZIP Compression Test

Most website speed checking tools, such as PageSpeed Insights, will serve you with an alert message in case GZIP compression is not enabled.

Finally, you could use your browser’s inspect tool to check whether GZIP coding is enabled. We will be testing our own website.

Activate the inspect tool by right-clicking anywhere (the background, in our case), and selecting Inspect to open the console.

Inspect Page

Once there, find the Network tab and click it.

Inspect Network

Finally, locate the HTML document and check its Headers section for the content-encoding: gzip and accept-encoding: gzip headers.

Network Headers

How to Enable GZIP Compression Using a Plugin

As is most often the case, a needed functionality can be provided using a WordPress plugin. For this demonstration, we have selected the free WP-Optimize plugin. After installing and activating the plugin, navigate to WP-Optimize/Cache from your WordPress dashboard.

WP Optimize Cache

Once there, select the Gzip compression tab and click the Enable button.

GZIP Compression Enable

And, just like that, you have enabled GZIP compression on your website.

GZIP Compression Enabled

How to Enable GZIP Compression On Apache Servers

If you are using an Apache server (currently the commonest), you can use FTP to edit your configuration files in order to enable GZIP compression on your website. Note that while WordPress is very user-friendly, we cannot recommend code editing for beginner users.

Simply find the .htaccess file in your root WordPress directory and add the following code after the existing directives:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JS, text, XML and font files
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
# Fix browser bugs on 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>

Note that the above code will only be executed if the mod_filter module is active on your server. Contact your hosting provider for details on that.

Sometimes, other software (proxies, firewalls, and other security software) may interfere with GZIP compression by disallowing accept-encoding headers. To ensure this doesn‘t happen, use the following code instead of the one given above:

"application/wasm" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"font/otf" \
"font/ttf" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"text/cache-manifest" \
"text/calendar" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/markdown" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
<IfModule mod_mime.c>
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
</IfModule>
</IfModule>

How to Enable GZIP Compression On Nginx Servers

In case you are using an Nginx server (the second most popular server), you need to edit the nginx.conf file, typically found at etc/nginx/nginx.conf on your server.

You need to add the following instructions to it:

# Enables GZIP
gzip on;
# Compression level (set within range of 1 to9)
gzip_comp_level 9;
# Minimum file size to compress
gzip_min_length 256;
# Compress data for clients using proxies
gzip_proxied any;
# Proxies to cache regular and GZIP versions of files
gzip_vary on;
# Disables GZIP compression for browsers which don't support it
gzip_disable "msie6";
# Compress files with following extensions or MIME-types
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Once you have done that, you will need to reload Nginx before the instructions are executed using the following command:

sudo service nginx reload

In Conclusion

If there is a quick way of improving your website‘s user experience, there is no reason not to try it. If there is a quick way of making your website rank better in searches, there is no reason not to try it. If there is a quick way of ensuring speedier loading and smoother running of your website, there is no reason not to try it. GZIP compression is all three.

Post your comment

Comments0