Thursday, April 2, 2009

Even Faster Web Sites

Steve Souders from Google talked about how to make websites loading quicker.
Steve has solid experience of making websites load more efficient, initially from a backend point of view. At Google he works with enhancing user experience meaning frontend interfaces. Research indicates that loading HTML don't take much time compared to JS and CSS which so:

  • If you want to minimize the time of loading HTML - Streamline backend
  • If you want to enhance the user experience - Streamline JS and CSS.

Steve has written some books too. In the prevoius one "High Performance Web Sites" he mentioned 14 rules to enhance user experience. In the recent "Even Faster Web Sites" he focuses on 8 rules.

  • Splitting the initial payload
  • Loading scripts without blocking
  • Coupling asynchronous scripts
  • Positioning inline scripts
  • Sharding dominant domains
  • Flushing the document early
  • Using iframes sparingly
  • Simplifying CSS Selectors

Steve said lots of very very interesting and geeky things. I am sure that the GUI-developers at Nansen would have loved this session!

Personally I got these three most important tips:

Flushing the document early
Images and other resources can be downloaded by the browser while the rest of the HTML is beeing put together on the webserver.

Flushing and domain blocking
You might need to move flushed resources to a domain different from the HTML-document to enable asynchronous downloading

Avoiding @import
Use couples of -tags instead. IE is handling @import really bad since it doesn't download stylessheets in parallell which increases the load time significantly. Other browsers are better, but since the first stylesheet has to be downloaded before start downloading the second one @import should be avoided anyway.