Future of Web Apps: Taking your web application offline Identity Matcher: Import social graphes
Oct 03

Steve Souders on Web Performance

Tech Add comments

Steve gave an interesting talk that walked through the 14 rules that he has come up with, and documented in his new book.

The importance of Frontend Performance

Steve showed a set of test results that ran against the Yahoo! front page.

For an empty cache, the backend work took only 5% of the time, and thus the front end was taking 95%. This shocked them.

Well, what about a primed cache? It was still 88%.

Hmm, so maybe this was just for Yahoo! :/ No, he looked at the top ten URLs

Steve looked at the top ten urls and they were all high. The only one that was below 80% was Google, with 64% on a primed cache.

Steve’s Golden Rules became:

80-90% is spent on the front end part

Since the cache matters, Steve then did a browser cache experiment. He added an image to a page and calculated the % of users with an empty cache, and the % of page views too.

Over time ~50% users, ~20% page views. Wow, so you thought that caching was great…. but you get a lot of hits with an empty cache!

14 Rules

  1. Make fewer HTTP requests
  2. Use a CDN
  3. Add an Expires header
  4. Gzip components
  5. Put stylesheets at the top
  6. Move scripts to the bottom
  7. avoid CSS expressions (evaluated up to 10 thousand times!)
  8. Make JS and CSS external (Downloaded / evaluated multiple times)
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Configure ETags
  14. Make Ajax cacheable (XHR to download email addresses for autocomplete)

He also said to:

  • Split static content across multiple domains
  • Reduce the size of cookies
  • Host static content on a different domain (no cookie payload as well as split)
  • Minify CSS
  • Avoid iframes (blank iframe 40/50ms) onload won’t fire until iframe returns!

Case Studies

Steve’s team was able to make Yahoo! Search 50% faster by simply:

  • Move js to onload
  • Remove bottom tabs
  • Avoid redirects
  • Image sprites
  • Host js on cdn
  • Combine js files

Finally, Steve demonstrated YSlow and showed how the net panel in Firebug is tricky and has people thinking that requests keep going out even though it is just getting the data from the cache.

The new version of YSlow that is coming out at the end of the week will have a fix for this. To test, fire up Live Http headers and see what is happening.

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What is the number before 3? (just put in the digit)