HTML, CSS and Javascript compression is a simple and effective way to save bandwidth and speed up page load on your site. It’s often overlooked and yet simple to implement, just enable Gzip compression for the right document types and enhance your site’s user experience.

In Apache, we achieve this by enabling content encoding. When a user requests a file like http://www.msn.com/index.html, the browser communicates to a web server, and the conversation goes a something like this:

1. Browser: GET me /index.html
2. Server: Found indes.html, it’s 187KB! Response code is 200 (200 OK) , requested file is coming
3. Browser: 187KB, loading

The actual headers and protocols sent between the two are much more formal (monitor them with HTTPFox, Live HTTP Headers or others if you like.

Now, everything worked just fine in our little scenario, the browser got it’s requested file (index.html) of 187KB in size and probably also loaded include files such as javascript, css and a bunch of images. Especially on lower speed Internet connections, it took a few seconds for the page to load all files.

That’s where compression comes in. Html, javascript and css are plain text and are ideal candidates for compression, while images and videos usually underwent some compression algorithm when saved as jpg, png, avi or flv. Compressing those files would provide very little to no improvement in file size and add processing overhead to the web server. So we want to ensure we exclude those. Read more »