Optimising Your Site's CSS, JavaScript, Images and Server Settings

The speed at which a site loads these days is becoming less of an issue, but still I occasionally visit a site where I think "wow, that's slow!" and look at the requests it is making in Firebug to see what on earth is going on. Often it's a simple case of loads and loads of individual requests being made for js files, css files and (large) images. We can do something about this!

For those of you who are not that technical when you point your browser at url it first finds the site and then is sent the HTML code to parse. All instructions for CSS, JS and images are then retrieved and requested from the server individually. This 'communication' (i.e. requesting) takes the majority of load time, not the file transfers themselves (usually anyway). If it was just one big file then things would be much smoother.

Well, there are a lot of things that can be done to this end. Firstly you can combine all CSS files and JS file into one file (for each) that is served for every page. IE specific fixes will still be separate though. Yes, this will make things bigger, much bigger in some cases, but stick with me here. You can then compress these files keeping the originals for future modification using CSSTidy and JSMin. Both have PHP integration to do this automatically so you can code rebuild functions in to your site. This makes files much smaller, but we can still do better. First images though...

Optimising images is harder for programmers than anything else, because (for the most part) we are not graphic designers. There are some basic rules though. Tile images (horizontally / vertically) as much as possible becasue these can be tiny and obviously reusable everywhere. Keep images such as logos small, use gifs and PNGs where possible (although remember the IE PNG transparency issues) and crush them to remove excess size (embedded profiles etc). If you must use jpegs (best for photos) remember to adjust the quality down and do not embed any profiles in them.

Okay, so we have combined and compressed our text files and have smaller images, now we head to our server config. I'm not a Windows user so I'm only going to mention methods for Apache (2) here. First up we can compress the text files automatically for delivery using mod_deflate (you may need to add this to your httpd.conf file or uncomment it) - there is a great example there so I don't need to go into it! And then we can also use mod_expires to inform the browser to keep a cache of these files for a certain period. Images are usually safe to cache for a reasonably long period, CSS / JS less so as you may alter them regularly. Again the examples on that page are good and I will let you fiddle.

If you implement these changes (or even just the server ones) you will see a large change in the request traffic to your site especially after the first page has loaded. Hopefully less requests will mean faster responses to the ones that you do make and a general increase in speed / service level for your site. Enjoy!