Website Compression
January 8th, 2006
In the age of broadband and such fast access to the internet it's easy to overlook compressing your website. Naturally your first question would be "Why should I bother?" and that's fair comment since on fast connections the amount of data on your site will have little impact on their time to view it. (So long as it's not ridiculously large of course). Well... I can think of two good reasons off-hand.
Firstly - There are still people on dial-up. In fact it came as quite a surprise to me at how many people still haven't got broadband either because they can't afford or it's not available in their area.
Secondly - It's benificial to you. By compressing the data on your site you're reducing the amount of data that has to be sent out by the webserver, which in turn saves you bandwidth.
So what is comprssion?
Compression is the method of reducing data to the minimum number of "bits" possible. I dare say you've downloaded a zip or rar file from a website at least once and those files are examples of compression. They make a file smaller and more suitable for distribution.
Okay you've sold me...but how do I compress my site?
Well there are several methods. I'm going to cover two here, the latter is the most convenient but I'll mention this other method first.
modgzip
If your host supports modgzip then you can simply gzip your webpages and put them in with the regular files, eg.
index.html and
index.gz
Browsers supporting gzipped content would get the gzipped file and others would get the regular html file. The obvious flaw with that method is that you have to have two copies of each file on your server which (for me personally) is a bit tedious. Also important to note is that if your host doesn't support mod_gzip then that method won't work and all browsers will get the regular html file regardless.
My Preferred Method
My preferred method will work on any linux webhost that has php installed and will only require you to have one copy of the files as the server will dynamically compress it when the file is requested. There's once caveat to this method too though. Your data has to be a .php file. If all of your site pages are .html then it's not too much of a problem as changing the html extension to php is all that is required. Then all you need to do is add one line of code right to the very top of the file.
<? ob_start("ob_gzhandler"); ?>
And that's it. That single line of code will make your webserver compress the html inside that file for any browser that supports it and the reduction in size is often around 90%! If you're site has a lot of visitors then this can translate to quite a big reduction in bandwidth consumption.
If you have mod_gzip on your host read on...
If your mod supports mod_gzip then you can use it to gzip other file types. Specifically CSS and Javascript files, the latter of which can sometimes be quite sizeable. An example of that being the script.aculo.us library. Prototype.js (48kb) and scriptacolous.js (3Kb) have to be called for you to use any of the effects the library provides and that amounts to 51Kb! I know it doesn't sound like very much but if we put it in context of a dial-up user that's a 10-12 second wait on top of whatever additional data needs to be loaded such as images.
But enough of that, you just want to know how to do it right? Okay, but you should be aware that some javascript files won't compress well in which case you'll have to leave it or strip it of white space yourself if you're desperate for the saving. Also some browsers don't accept gzipped css or javascript very well but I've only see this happen on IE 5.0. There aren't that many people using that and if there are then they're just crazy, although that stems from my belief that the oldest browser people should really bother using is IE 6. Anything earlier than that probably isn't secure enough by todays standards.
So heres the code...
Okay so to gzip your javascript and css you need two files. A php file with a little bit of code in and a .htaccess file. So first the php code.
Save this as gzip-css.php
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
If you want to compress javascript files then it's essentially the same code with just a few tweaks
Save this as gzip-java.php
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
Obviously if you're using a different character set to UTF-8 then you can change that value too. So now that you have your php files you need a .htaccess file for each
For CSS
AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
For Java
AddHandler application/x-httpd-php .js
php_value auto_prepend_file gzip-java.php
Now all you need to do is put the matching php and htaccess files in the same folder as the file you want compress and that's it. Your webserver will handle the rest. If your css and javascript files are in the same folder than you can combine the code for the .htaccess into one file and then put both php scripts in for the same effect.
Quick realworld case...
To give an example of the sort of time and bandwidth these are some of the total load time stats from my site (for 56k users)
Without compression - Total load time of 87 seconds
With standard gzip compression - Total load time of 65 seconds
With html, css and javascipt compressed - Total load time of 30.85 seconds
The benefits are quite clear to see for dial-up users. Although in this case it's still quite a long time much of that is because I use a lot of images on this site. If you're interested in the total size of your site and how long it takes to load you can use this very handy site to measure it Websiteoptimization.com
I hope this has been helpful!
