Since Steve Souders’s published “High Performance Websites” back in September 2007, a lot of people finally sat up and took notice of front-end web performance optimization techniques. Over a year later, you’d hope that most folks had figured out the basics like compressing content, using expires headers and reducing requests. Unfortunately, it seems that multi-core processors and bandwidth explosions have pretty much drowned out the awareness of this topic. Case in point, take a look at the search trends for mod_gzip vs. mod_deflate over the last 5 years.
Doesn’t exactly represent a growing trend, does it?
Website performance optimization is yet another perfect bridge for developers and operations staff to come together and help each other out. Developers want their pages to load as fast as possible, delivering the best user experience. Sysadmins want to reduce load on their servers and decrease operation costs. To start out, have a look at some of the available tools you can use to measure the performance of your website.
Local tools for measuring
What started out as a javascript debugger for the Firefox web browser has evolved into the Swiss Army Knife of web development tools. The “Net” tab (pictured below) is what we’re interested in : it shows the queuing of all HTTP requests and indicates which of these are loaded in parallel and which are blocked.
A Yahoo! development add-on for the Firebug plug-in (yes, you heard me right – an add-on for a plug-in!), YSlow actually grades your website against best practice optimization ideas.
Developing for Windows and Internet Explorer? That’s still not an excuse as the basic tool from Simtec Limited provides a comparable functionality to Firebug including the ability to decrypt and display HTTPS traffic.
Websites for measuring
An online (read no local network side-effects, but your site’s performance measured straight from the backbone) HTTP request analyzer in the same vein as the “Net” tab from Firebug above.
Another HTTP request analyzer but with an added feature to choose one of three hub cities including New York & Amsterdam – very helpful for us folks here across the pond.
WebSiteOptimization.com’s tool is a little less flashy than the preceding sites, but mixes in-depth analysis of HTTP requests with some best practice recommendations.
Interestingly enough, in making this post I realized that all these screenshots were becoming a bit expensive (5 images at around 320KB). So, I went back through and exchanged those expensive PNGs for comparable JPGs saving almost 50% of the total page size! Such simple considerations can mean the difference between your site surviving that initial Digg surge or conceding “502 Service Temporarily Overloaded” defeat.
That should keep you busy for awhile. Next week, I’d like to share some of the optimization experiences and techniques recommended by Yahoo’s Exceptional Performance team. Subscribe here to add it to your favorite newsreader!
Agile Web Operations 