Improving website performance

One of the most interesting presentations that I attended at FoWA was by Steve Souders (High Performance Yahoo!). Steve described the work that his team have done at Yahoo! to increase page load performance which led to the (perhaps surprising) discovery that 80-90% of page load times is generally consumed by front-end activity rather than back-end business logic, database access etc. By “front-end activity” Steve is referring to activity that takes place after the initial html page is retrieved such as requesting static content, parsing css/js, and actually rendering the page. The obvious conclusion is that the biggest performance gains can be achieved not by tweaking sql queries or web server config, but by focussing on front-end performance.

The 14 Rules for high performance websites

As a result, Steve advocates the following “14 rules

  1. Make fewer http requests
  2. Use a Content Delivery Network (CDN). E.g. Akamai
  3. Specify a far-future “expires” header
  4. Compress text based content with GZip of deflate (achieves approx 70% reduction in file size)
  5. Place CSS imports in the HEAD section at the top of the html page. (IE won’t start to render the page until all CSS has downloaded).
  6. Move all script imports to the bottom of the page. (Scripts will block rendering of the remainder of the page).
  7. Avoid CSS expressions (as they are evaluated every time a browser event – mouse move, resize, key press – fires, so can run tens of thousands of times per page!)
  8. Use external css and js files to take advantage of browser caching.
  9. Reduce DNS lookups by hosting content in as few domains as possible
  10. Minify JS and CSS (removing whitespace give approx 20% reduction)
  11. Avoid redirects (as they are not cached unless they have an explicit “expires” header)
  12. Remove duplicate script imports (or duplicate copies of functions in different script files)
  13. Configure etags correctly (or disable if not configured)
  14. Cache AJaX requests where sensible (don’t automatically append a random number to the request to bypass the caching mechanism)

I’ve been a big fan of Firebug since I started writing Javascript/AJaX but this presentation alerted me to the YSlow plugin for firebug which analyses a page and generates a rating against the 14 rules.

I highly recommend reading more about these techniques on the Yahoo! developer site, and watching Steve talk about the rules in more detail. Steve has also recently brought out a book on the subject.

Leave a Reply