21 Nov 2008

Three quick tips for optimising your homepage

I couldn't help noticing the number of local blogs which take a seemingly long time to load pages. Curious why, I decided to take a few of my favourite blogs and run a tool called YSlow on them. YSlow is a performance test you can run on a website through your browser which will identify weak points and provide a score to a website. It requires Firebug to be installed in to Firefox. With the vast majority of blogs scoring a big fat F, I thought these three tips might help bring up that score to a more respectable C/B grade. Two of these techniques can be performed using the .htaccess file - a hidden file used in Apache setups (which I assume hosts the vast majority of local blogs) that contains configuration data for directories on a website.

ETags

Caching is supported by nearly all modern browsers, and is a process through which your browser will store content from a website on your computer so that it doesn't need to download it again next time you view. This can be applied to your CSS, images and the pages themselves. It requires the Apache expires.load file to be in the mods-enabled folder - If your hosting package doesn't have it available drop an email to your hosting company and ask them to enable it for you. In to your .htaccess file in the main folder containing your website add the following lines. 

FileETag        MTime Size
ExpiresActive   On
ExpiresDefault "access plus 7 days"

This will tell browsers to cache anything from your website for 7 days after downloading it.

Gzip / Deflate

Caching will save you a lot of bandwidth and make your pages load far quicker by not requiring a user to download the content on every click. The following tip, which you can learn about on HowToForge, will enable you to compress any data being sent from your website. Again in your .htaccess, paste the following. 

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \
    \.(?:exe|t?gz|zip|bz2|sit|rar)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

This may appear complicated at first, but essentially what you are doing is telling Apache to compress any file that is not an image or an archive (both of which already have their own compression). This means any text documents, XML and RSS feeds will be compressed.

Minimise your Media

The final quick method to save a small amount of loading time is to remove all comments, line breaks and white space from your CSS and JavaScript.

Remember to save a copy of your originals for future editing though! On a CSS file over 1000 lines you will see a massive decrease in file size.

Implement these three tips and you should immediately notice a huge decrease in your page loading times, and over a longer time period see your bandwidth (and thus cost) drop considerably.