When optimizing a website’s performance, the very first thing you should check is whether or not your site is taking advantage of GZIP Compression.

What is GZIP

The Cole’s notes of what is GZIP, is that GZIP Compression is a mechanism where the server compresses the requested web page, image, or other file, before serving it to the browser.  If you’ve ever “zipped” up file for archiving, or before sending it in an email, it’s the same concept.

As soon as the file has been received by the web browser, it decompresses it and then uses it, either to display, or to render aspects of the page.

How To Enable GZIP

Depending upon the type of web server that you’re running, there are different ways to enable GZIP compression.  In this article, we’re going to go over enabling GZIP on the Apache web server platform.

Step #1: Test Your Web Page

One of the tools we use to test a web page is checkgzipcompression.com.  Test out your home page to see how big it is, and how much can be saved by compressing it.  In many cases, HTML pages can be compressed by over 50% if they are not already compressed with GZIP.

Step #2: Enable GZIP with .htaccess file

Apache technically has two possible compression options available, in most cases.  Depending upon your web sever, and how it is configured, you may have on or the other installed.  The code below covers both compression mechanisms.

In the root folder of your website, create a file called “.htaccess” (yes, that is a dot before the ‘h’), if you don’t already have one.  At the very beginning of that file, add the following code:

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers Which Can't Handle Compression BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

In the first section of the code you’ll see a special conditional tag <IfModule mod_gzip.c> and then later, a closing conditional tag </IfModule>.  What these tags do is tell the server that is the module “GZIP” is installed, then use the enclosed code.

You will also see that there is a second set of conditional tags that surround the code that would be used if the server has the “DEFLATE” module installed instead.

Once you’ve placed the code in your .htaccess file, save it, and then upload it to the website root in your live site.

Step #3: Test Your Compressed Page

Head back to checkgzipcompression.com — you should now be able to test your home page and see that it is now compressed with GZIP and by how much.  This can immediately impact how fast your web pages load, and help to boost your Google PageSpeed score by as much as 15 points.