Website Optimization GZIP Compression

Speeding Up Your Web Pages: Enabling GZIP Compression

I wrote a general checklist a couple of weeks ago on what you need to tackle to make your website load faster, and subsequently score better with Google PageSpeed.

This week, we’ll cover the very first thing you should do, which is enabling GZIP compression.

The Coles notes of this technique to speed up your web pages is that it takes your resource and “zips” them.  Just like if you were to take a file in Windows, then “right click” and “send to compressed zip folder”, enabling this feature will reduce the size of the files that are requested by the visiting user’s browser, while in transit.  The browser will expand the file automatically (faster than it takes to transfer the regular uncompressed resource) and render it in the browser.

Now, depending upon the type of server you’re running, there are different approaches.  In this tutorial, we’re going to cover the Apache web server.  Chances are, if you’re on a Unix or Linux system, you’re running Apache.

You may be running Nginx which is a different web server altogether which requires more administrative privileges to set up GZIP.  For the sake of sanity, if you’re on an Nginx server, just contact your hosting provider to see if they can enable it for you.

Test Your Uncompressed Page

One of the tools I use to test a web page is checkgzipcompression.com.  Test out your home page to see how big it is, and how much it can be compressed.  In many cases, many HTML pages can be compressed by over 50%.

Enabling GZIP Compression on Apache

Apache actually has two different compression options: mod_deflate and mod_gzip.  Depending upon your server, you may have one or the other installed.   You can use this code to cover both situations.

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

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

You’ll notice in the first section that there are a group of instructions surrounded by special conditional tags <IfModule mod_gzip.c>…</IfModule> — this allows the server to only try to execute those lines if it has that module installed.  This block of instructions are for the “gzip” module.

The second section is similar in that it will only execute if the “deflate” module for Apache is installed.

Save your file and upload it to your website into the website root folder (where your home page resides).

Test Your Compressed Page

Now, head back over to checkgzipcompression.com.  Test out your home page again to see how much it has been compressed. Chances are, it has been compressed by over 50%.  In fact, all of your resources are now compressed.  This can immediately impact how fast your web pages load, and probably boost your Google PageSpeed score by as much as 15 points.