Optimised Webpage Delivery and New Cool Tools

I'm really pleased. Having spent more time on finding solutions for front-end issues has certainly been worth it. I have been trying to minimise network load through the use of deflating resource sizes, minifying css and js, and easily managing version numbers of resources so that lengthy expiry dates can be used. There are certainly some great solutions out there... so this is what I did:

Deflating resource sizes: For the php files I used ob_start("ob_gzhandler");. For the css (and future js) used Minify which worked for me when other solutions would not. All full automated.

Minify resources: This is quite labour intensive. To do this, I manually replaced all @import statements in other css files with the css from those files. Then I ran YUI Compressor to minify the css files.

Versioning resources: Let's face it, doing this by hand is tedious and more importantly error prone. Using the resource's 'natural' name and managing them in a version control system is the way to go. But to use lengthy expiry dates and allow users to keep up with your latest resource changes requires a way to uniquely identify those resources through URLs. I found this article Automatically Version Your CSS and JavaScript Files at Particle Tree and implemented it.

So what is the outcome of this effort? For my homepage browsers were doing the following:

Browser Type	HTTP Connections	Total Size
non-ie	8	43KB
ie8	10	46KB
ie6/7	11	46KB

(ie8 and ie6/7 have conditional comments to load additional css rules) and afterwards:

Browser Type	HTTP Connections	Total Size	Reduction
non-ie	4	8KB	81%
ie8	5	8.5KB	81%
ie6/7	6	8.5KB	81%

That's faster page delivery and a snappy response (Host Provider permitting).

Steve Souders announced a couple of new tools today. I think you're going to like this one...SpriteMe.