I’ve been working on a website for the past few weeks, and as I’m reaching the final stages I’ve started to look at loading times and performance etc. The site uses quite a lot of jQuery and other AJAX libraries, but I was still shocked when I realised that over 500kB was being used just in Javascript!

Whilst the vast majority of the population are probably now on broadband, even I can’t forgive the homepage of this website totalling almost a 1MB download when images and the rafts of CSS are included.

So I’ve been making good use of YSlow, the excellent performance debugger produced by Yahoo, which runs within Firefox (as part of the excellent Firebug suite).

My initial score was as bad as I thought, with the index page receiving a ‘Grade E’. My first port of call was to fix the GZip compression on my Apache box, which involved putting the following in a .htaccess file in the root web directory (/var/www on my Ubuntu server).

# Below uses mod_deflate to compress text files. Never compress binary files.
AddOutputFilterByType DEFLATE text/html text/plain text/css text/javascript text/xml image/svg+xml application/javascript application/x-javascript application/atom_xml application/rss+xml application/xml ap$
# Properly handle old browsers that do not support compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Explicitly exclude binary files from compression just in case
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
SetEnvIfNoCase Request_URI \.avi$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mov$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.rm$ no-gzip dont-vary

YSlow also complained that none of the page elements had expiry headers. Expiry headers are used by the browser in order know how long to cache an object for.

First of all, enable mod_expires:

#> a2enmod expires

And then put the following in your httpd.conf (/etc/apache2/httpd.conf):



ExpiresActive on
ExpiresDefault "access plus 1 year"



You should be able to see that the above sets the expiry headers for the most common file formats, and sets them for one year in the future. You can modify this value as per your requirements, but be warned that YSlow complains if it isn’t “too far in the future”.

Finally, YSlow was complaining about ETags. ETags are explained thoroughly here, which can be summarised with: the majority of browsers use the “Last modified” header tag to validate components, and as such, ETags are largely redundant and as such they’re best turned off.

To do so, first enable mod_headers:

#> a2enmod headers

And then place the following in your site config file (i.e. /etc/apache2/sites-enabled/sitename):

ServerAdmin lm@nothingbutreboots.com
ServerName nothingbutreboots.com
ServerAlias www.nothingbutreboots.com
DocumentRoot /var/www
Options FollowSymLinks
AllowOverride All
Header unset Etag
FileETag none

Finally, all that was left to do was follow the remaining tips offered by YSlow, namely merge all the JScripts into one file, the same for CSS. And then run all the images through the excellent Smush.It.

Et voila! Grade: A

Google now offers there own performance analysis tool: Google Page Speed. Like YSlow, it tags on to the Firebug backend. Initial reports are mixed, but there’s a helpful comparison of both tools here.