As I said in Part One, I’ve been full on geeking out with the whole “how quick are your websites?” question just recently. Having had a play with some really basic caching for Expression Engine 2.x, I turned my attention to the front end components. It’s good for SEO after all.

If you’re going to try this, you’ll need the following:

Page Speed

Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

ySlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool.

I’ve assumed you’ve got Firefox (even if it’s not your default browser) and that you’ve got Firebug as they’re pretty much standard web development tools.

I then proceeded to run a Page Speed test on this site - it got 80 out of 100 and a C on ySlow. This annoyed me slightly - I mean, it’s black text on a white page! Hardly intensive stuff. I then proceeded to lose hours of my life improving these scores. Some of the things I did were complete overkill, some were simple things which all sites could and should do. All are listed below….

First things first

I minified my CSS and Javascript files, as well as compressing them. This means fewer trips to the server and less wasted kilobytes in the file. I used a handy plugin which you can find here. Dead easy to use, so I’m not going to go into the details. These was a 31% reduction in the file sizes.

Page Speed - 83/100

Smush the images

Using the ySlow link (it’s on the Tools tab in ySlow), I optimised my images (even though there was only a few to do). Even though I’d “Saved For Web” with decent settings in Photoshop, I still managed to reduce the images by a further 4.22%, saving 16.8 kb from the image files.

Page Speed - 84/100

Caching using .htaccess

I had a rummage around on the internet and found a few bits of reference reading (the best one being here). I hacked together some changes to my .htaccess file and placed them after the other entries in the .htaccess. (If you want a copy of what I added, email me.)

I now cache css files, image files and js files all using different expiration dates.

Page Speed Score - 87/100

Final step - and this is the one which is overkill

I’ve started serving my static files from a cookieless domain. All images, css and js files are now hosted on a seperate cookieless domain. The lack of cookie reduces the total size of the requests on the server.

You can find out more here.

This is complete overkill for this small site - however, I did learn one interesting thing. Whilst not impossible to use a sub-domain (I initially tried “static.jamesgreenwood.co.uk”), it does cause problems with Google Analytics. GA sets a domain wide cookie, so to use a sub-domain more effort is required (you have to amend the GA includes). I’m lazy so used another domain entirely.

End Result

I’ve reduced page weight and I’ve reduced loading times.

• Page Speed Score - 94/100 (up 14 points)
• ySlow Rating - A (up from a C)

I’ve since performed some of these “tricks” on our client sites with similar results (in fact, more impressive results as our client sites usually have a bit more about them than black text on white background!). I’m also now playing with ineffective CSS selectors to eek out a few more Page Speed points.

Should you go to the lengths I have? Probably not. Should you make your sites quicker using some of the above? Yes, without doubt. In fact, all the guys in the Strawberry office are now addicted too. Sorry chaps!

As Tesco says, “Every little helps”.

If you’ve any questions or comments, drop me an email or a tweet (must get round to adding commenting to the blog posts!)....

EDIT:

So I had a Grade A on ySlow, but only 90 out of 100, so I carried on a bit more. Yes, I’m that sort of a chap.

I’ve managed to nibble away a bit more since I originally posted. By removing the ETag header (read more), you disable caches and browsers from being able to validate files, so they are forced to rely on your Cache-Control and Expires header. Basically you can remove If-Modified-Since and If-None-Match requests and their 304 Not Modified Responses. I’ve removed the ETag header for images only and seen another improvement in response time. I’ve also gzipped up and minified the Tweet This plugin that I use.

94 out of 100 on ySlow.

I still wasn’t satisified. I investigated CDN - Content Delivery Networks - as this test was the one thing which stood out. I found this which allowed me to inform ySlow about my CDNs. I added my content domain name, restarted Firefox and checked again. Total cheat? Yes. I aren’t putting a CDN in place for this little blog and I wanted an extra point!

95 out of 100 on ySlow.

The only thing missing now is expiry headers on the files which are minified on the fly, but to be honest, I’ve had enough now. I can finally sleep at night knowing I’ve screwed the nuts and bolts of this site as tight as I can.

Quite what I’ve achieved (other than geek status) I’m not entirely sure :)