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
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put stylesheets at the top
- Move scripts to the bottom
- avoid CSS expressions (evaluated up to 10 thousand times!)
- Make JS and CSS external (Downloaded / evaluated multiple times)
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
- 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.