So first off, why do we care about front end optimization? Take a look at the breakdown for Amazon.com as an example (click the image for a larger view):
The red bar represents the time it took to serve and download the core page from the server (920ms in this case). The rest of the 6.34s is spent downloading images, css, js, and rendering/executing it all. Clearly there is plenty of room for optimization on the front end. (Note: many of the requests have been stripped from the screen shot – limited only to HTML requests – for brevity.) This is just for Amazon – many other sites are even worse ratios for front end vs. back end load time.
Now that it’s clear that there is optimization to be done, how does one get started? I’d recommend getting started with a couple basic tools right off the bat. Here’s my short list:
- Firebug – great addon for Firefox with tons of features helpful for front end optimizing (among other things)
- YSlow – an addon to an addon, YSlow extends Firebug to give it a new tab with a bunch of handy features. It also has some tips built right in and will tell you which you’re doing and which you’re not
- HttpWatch – an HTTP traffic sniffer for IE.
In my next post I’ll start covering some basic techniques to improve performance. Got a tip of your own? Let me know in the comments.