The sites I’ve been working on had been suffering from flab. A JavaScript library here (jQuery of course), a plug-in there, another, another, another… then a large plug-in that loads it’s own plug-ins (Shadowbox v3 – I’m talking to you).

It took a kick from outside (“your site x sucks HTTP requests and bandwidth”) to realise things were going downhill.

So – with the help of the good folk at Yahoo YSlow and the new copy-cat-kid on the block (Google Page Speed) with their plug-ins for a plug-in(firebug) for Firefox [oh the irony]… I’ve started to get things in line again.

Both YSlow and Page Speed have helpful links and information once called – and now I can pat myself on the back for having improved my YSlow scores from an ‘F’ to a ‘B’. Wetware heh.

Main issues I was able were too fix were too many HTTP requests and a lack of explicit caching direction from the web server. Nextly I’ll be looking at getting interface elements into a sprites for future jobs. (Must take this sprite/CSS creation tool for a spin. Looks absolutely fab.)

Reduce HTTP requests

While combining CSS files is trivial, combining a bunch of disparate JS files into one is not painless – I’ve had to drop a jQuery tooltip plug-in as it wouldn’t play nice when bundled up with its playground compatriots.

Server side caching and compression

is achieved the following htaccess rules:

##Cacheing static components

FileETag none
Header unset Etag

# Far future 1 YEAR
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>
<FilesMatch "scripts.inc.php$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

# Past last modified
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$">
Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT"
</FilesMatch>
<FilesMatch "scripts.inc.php$">
Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT"
</FilesMatch>

#Compress
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Shadowbox woes

I now may be on the lookout for a replacement to Shadowbox. Shadowbow v2 was great – it came with lots of build options and could be explicitly launched by jQuery on Document Ready. v2 wasn’t IE8 compatible however – forcing an upgrade to v3 – still in beta… Ho hum. This required an updated version of the JW FLV media player which I’m not mad keen on – and that needs a new licence. While Shadowbox is now very clever and can automatically find it’s own dependencies – it has many of these – each one with an HTTP request. While it is easy to combine the whole bundle into a single file its something I’d rather not have to do/keep track of – I’ve already got a rod for my back with the other jQuery plugins…