Compress Pages with MOD_DEFLATE on Apache

I have recently been experimenting with mod_deflate on an Apache server to save some bandwidth. If like me, you may have found your host cutting access to your website temporarily if you go over your bandwidth allowance, meaning you have to purchase more bandwidth to get your pages to go ‘live’ again.

However, by using gzip or deflate you can shave off valuable bytes/kilobytes each time pages and files are requested from the server. Although the savings may appear to be small, when these savings are multiplied hundreds or thousands of times over the course of a month it soon highlights the value of using one of these compression techniques.

As I have only tested Apache, this post only relates to Apache compression. Worth noting is that some older browsers don’t support or have issues with compression. This is not an issue for most of the recent browsers. I have been testing my compression on various browsers including IE5, IE6, IE7, Opera 8 & 9, Safari, Camino & Firefox 1 & 2. I haven’t come across any problems with any of these browsers. As mod_deflate is easier and quicker to implement I have stuck with this method, however there are some extra options available if you choose to use mod_gzip compression.

I have stuck with compressing HTML, CSS and JavaScript. To do this, the easiest way is to use an .htaccess file in the root of your website. I use the following line of code saved in the .htaccess file:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

This line of code can be added to an existing .htaccess file in your root directory if you have already set other parameters. You can add or remove other file types from the line of code above, but I found it to be adequate for my needs.

Once you have implemented compression it is important to test the results. The easiest way is by using FireFox coupled with the Web Developer Tools plug-in.

Once the plug-in is installed follow these steps:

  1. Load your website homepage in FireFox
  2. Click tools menu
  3. Navigate to web developer > information > view document size

You should then see a page containing information about your website. This page will contain details about any compression that has been carried out on the web page.

It will give a break-down of the individual elements and scripts as well as a total saving. In my case the result showed: Total 107 KB (138 KB uncompressed) A saving of 31KB.

It may not sound like much, but can certainly add some zip to the rendering of your pages, and reduce bandwidth bills over the course of a month or year. Further details are available at betterexplained.

Official Apache Module mod_deflate information.

UPDATE When testing the compression of my pages, I found that some JS files weren’t being compressed (Use Web Developers Tool – Information > View Document Size). If this is the case for you, you can add the following code to your .htaccess file:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>