Website Performance Optimization

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

  • Firebug web development evolved
    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.

  • YSlow for Firebug
    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.

  • HttpWatch
    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

  • Pingdom Tools – Full Page Test
    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.

  • Site Performance
    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.

  • Web Page Analyzer Free Website Performance Tool and Web Page Speed Analysis’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!

    Leave a Reply

    Fill in your details below or click an icon to log in: Logo

    You are commenting using your account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s

    This site uses Akismet to reduce spam. Learn how your comment data is processed.