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.