Tech Talk: Steve Souders on Even Faster Web Sites

Last week, we were fortunate enough to have Google's Steve Souders give a tech talk on Even Faster Web Sites, fresh on the heels of his presentation at OSCON in Portland two weeks ago.

Steve's name likely sounds familiar to you; indeed, if you work in web development, you'd have to work hard to avoid benefiting from his research. Not only has he spoken often at such conferences as OSCON, Rich Web Experience, Web 2.0 Expo, and The Ajax Experience; he co-founded O'Reilly's Velocity conference; he's also the author of the book High Performance Web Sites: Essential Knowledge for Front-End Engineers and the excellent YSlow extension for Firebug. He credits a lot of his success to adopting Harvey Penick's methodology of keeping a notebook handy and jotting down interesting observations, researching them further, and acting on the best ones.

The tech talk centered around Steve's "Performance Golden Rule": 80-90% of the end user response time is spent on the front end (he uses a simple user-centric metric for dividing front end and back end load time: loading the HTML document is back end; everything after that is front end). This golden rule is clearly sensible for three reasons:

1. There's greater potential for improvement. Saving half of 90% is a much bigger win than half of 10%.
2. Front end changes are simpler than back end. The techniques you'll use (minification, consolidation, compression, etc.) take engineer days, not weeks.
3. It's a demonstrably effective approach. It's not only been proven at Yahoo and elsewhere, you can likely make trivial changes to your own site and see the results immediately.

The first half of the talk was a discussion of the fourteen rules which are the basis of both his book and YSlow, which essentially automates measuring a web site's performance against those fourteen metrics. Rather than recount it in great detail, I'll urge you to get a copy of his book (via Amazon, O'Reilly's Safari, or your favorite local bookstore) and read the Yahoo! Exceptional Performance Team site while you're waiting to get the book in your hot little hands. Time and money well spent.

The second half was focused on Javascript and how it affects page loading. The load time of most modern web pages is 20-40% of the total load time, so reducing this results in noticeable improvement in page load speed. His key observations in this area are:

• Most browsers load Javascript serially by default
• Only about one-fourth of the Javascript functions that are loaded are actually needed before the onLoad event fires
• It's important to understand how element load order affects particular browsers (e.g. Firefox will block all parallel downloads while downloading stylesheets; Internet Explorer will block if you follow a stylesheet with an inline script)

Accordingly, the top items on his hit list are splitting the initial script payload, loading
scripts in parallel, and careful attention to placement of inline
scripts — all aimed at accelerating the firing of the onLoad
event.

I could go on in some detail about how to accomplish this, but you'd be better served to read Steve's blog and watch some of the videos of his other presentations available on his web site. Instead, here's a preview of the guidelines which are the beginning of his next book, some of which are also found on the Yahoo! Exceptional Performance Team site:

1. Split the initial payload
2. Load scripts without blocking
3. Don't scatter inline scripts
4. Split dominant domains
5. Make static content cookie-free
6. Reduce cookie weight
7. Minify CSS
8. Optimize images
9. Use iframes sparingly
10. To www or not to www

Finally, you should have a look at Cuzillion, Steve's tool for modeling web page elements and tinkering with how order affects loading. His slides from the tech talk cite it for examples, and I suspect his next book will, as well. Very useful as you're trying find the delays in loading your web pages and understand what you can do about them.