@media2007: Nate Koechley: High Performance Web Pages

This was a presentation for developers rather than designers so I was expecting a lot of information to go over my head, it did, but enough has stuck to write a short post.

Nate Koechley is a Yahoo! frontend engineer and designer based in San Francisco. The bulk of his presentation was based around a twelve step programme to create quicker web pages.

  1. Make fewer HTTP requests: This refers to combining style sheets and scripts to reduce the amount of communication between your browser and the server. He also recommended using Image Maps, which I thought were considered old hat, but for icon driven navigation I can see how this could work in reducing the need for multiple images.
  2. Use a CDN: this stands for Content Delivery Network, a way of deploying content from multiple “CDN nodes”. This is important for increasing the page load times on sites with a lot of traffic such as MySpace, which uses Akamai.
  3. Add Expires Headers to cached content: This allows control of caching mechanisms in your browser and is important for dynamic content which has to be downloaded repeatedly because it is not cached correctly.
  4. gzip components: gzip is a software application used for file compression with 90% browser support. I use Photoshopto optimize images for the web, gzip can apparently compress them by a further 50%.
  5. CSS at the top of the document: Links to external style sheets should be placed high in the HTML document, and use link rel=”stylesheet” rather than @import for linking.
  6. Move Script Includes to the bottom of the document: Links to external JavaScript files should be put after the closing body tag. This recently adopted practice is a necessity because page downloads are paused until an externally linked script is fully loaded.
  7. Avoid CSS expressions: CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. CSS expressions aren’t generally used by designers who enjoy the clarity of basic CSS mark up.
  8. Always link to external CSS and JavaScript files
  9. Reduce DNS lookups: You can reduce Domain Name System (DNS) lookup traffic by using multiple hosts, therefore distributing content via parallel downloads.
  10. Minify Javascript: You can compress external CSS and JavaScript file sizes by eliminating white space. You can use a tool called ShrinkSafe to do this or you can do it safely by hand.
  11. Avoid page redirects
  12. Turn off ETags: ETags prevent pages from caching.

3 thoughts on “@media2007: Nate Koechley: High Performance Web Pages

  1. Mike Nolan

    Very useful. We’re already doing some of these – output from PHP scripts is generally gzip compressed where allowed but we should probably turn it on for other content too. The benefits of this are significant with 90% compression on CSS, JavaScript and HTML.

  2. Mike Nolan

    Ah, that makes more sense! Never done it from scratch myself but used the technique for a star ratings system. Looks really nice but a real pain to do the calculations. I also wonder how well it would degrade on mobile devices – would you just get the huge image or does Pocket IE / Opera Mobile support enough CSS to render correctly?

Comments are closed.