MCP4

This is the first in 3 part series on website optimization using Firebug and YSlow. It is aimed at Bluehost users, but should be applicable to any similarly setup host like Dreamhost, Host Monster, etc…

As many know, we are big fans of Bluehost here, but one feature that they really lack is GZip compression.

Q. What is GZip and why is it important?

A. Simply put, Gzip is a compression tool that reduces the size of files (like CSS or javascript files). It is important for two reasons,

1. Reduced file sizes means: faster downloads, quicker site and thus a happier end user.
2. Bandwidth, smaller files consume less bandwidth.

Fiftyfoureleven.com have a very good blog about this topic, however there are issues with both of its suggested methods. Method 1, requires changing filenames, big problem if you have a lot of pages. Method 2, does not work on Bluehost PHP 5.2.5/Apache 2 configuration -will give nothing but unhelpful Server 500 errors. The good news is that all is not lost! Instead, you can use PHP to GZip the components on the fly. There are 3 easy steps to compressing file output streams,

Step 1

In the folder where your CSS files are located (perhaps www.yoursite.com/css/) create a file called “.htaccess”, put the following line into it,

AddHandler application/x-httpd-php .css

Step 2

In the same directory as above, create a PHP file called “gzip-css.php” and put the following into it.

<?php
ob_start ('ob_gzhandler');
header('Content-type: text/css; charset: UTF-8');
header('Cache-Control: must-revalidate');
 
header('Expires: '.gmdate('D, d M Y H:i:s',time() + 2629743) . ' GMT');
?>

Step 3

Again in the same directory, create a file “php.ini” (PHP configuration file) and into it put the following,

[PHP]
 
; Automatically add files before any PHP document.
auto_prepend_file = gzip-css.php

Done!

Now clear your browsers cache and load your main page again. If all worked, you should notice no difference (except maybe page is a bit faster!). If you have Yahoo’s YSlow installed, you can use it to verify that the files have been compressed.

Javascript

Repeat same steps as above, except change the line in gzip-css.php,

header('Content-type: text/css; charset: UTF-8');

to

header('Content-type: application/javascript; charset: UTF-8');

Also in the .htaccess file change the bit “…tpd-php .css” to “…tpd-php .js”. Lastly, If you rename gzip-css.php to gzip-js.php make sure that you update the php.ini file also.

Conclusion

Using this method, the CSS on this blog went from 13.8K to 4.4K and our javascript went from: 18.2K to 11.1K.

Overall, using GZip and the other optimizations our page size went from 131.5K to 38.9K, or a 340% reduction in file-size, not bad for half and hours work. If you run into problems leave a comment. Tune in for Part 2 next week to see what other optimizations we did.