dan/blog

I’ve found recently that complex designs aren’t just more difficult to build, but have significant effects on browser performance. To improve the performance of our site, we used CDN (Amazon S3 hosting the files), we removed background images and we tweaked the server configuration no end.

Now, something you find out very soon when you start optimising pages is that your browser can’t make more than 2 requests to a given domain at any time. So, when you hits Amazon.com we get the HTML, then we connect back to amazon.com to get the CSS, images and JavaScript to make the page pretty and clever. These extra bits – collectively called resources – can only be downloaded 2 at a time from a given domain name.

This matters because your beautiful page, with its drop-shadows, fancy JavaScript and massive background image all needs to be downloaded before the user can enjoy just how lovely it is. BUT… if you have 10 images sitting on 1 server your browser can only get 2 at a time. This slows things down.

Part of the answer is a CDN – a content delivery network – whose sole role is to host resources on a different domain from your website. So the images for example.com might be hosted on static.example.com, or even on static1.example.com, static2.example.com and static3.example.com. The more domains, the more connections your browser can make.

You can also read a very good description of implementing a CDN with Rackspace’s Cloud services.

So, that’s method number one. Another method is to reduce the number of resources that have to be downloaded. Instead of downloading 100 images, download 2. Google Web Toolkit does this out of the box, by bundling up individual images for you.

A rails package I just came across does the same thing – check out http://documentcloud.github.com/jammit/ mentioned in Rails Inside.