I’m attending the Web 2.0 Expo at the Moscone Center in SF this week.  First up is the High Performance Webpages workshop, presented by the Yahoo! Exceptionial Performance team.  Pretty interesting so far.

Their primary thesis is that 80-90% of user-perceived response time is client-side and images; only 5-10% is the actual generation and downloading of HTML.  Even if the user has cached a lot (they’re visitng the page again), the percentages don’t change much.

Some of the interesting facts they’re citing:

• The percentages cited above (HTML-generation vs. other things in user-perceived response time) is pretty consistent across the 10 biggest properties on the web.
• 40-60% of unique users visit with Yahoo with an empty cache. ~20% of total page views are with an empty cache; higher than you’d think.
• Base cookie sizes for some major web properties set at their splash page (in bytes):
  • Amazon  60
  • Google  72
  • Yahoo  122
  • CNN  184
  • YouTube  218
  • MSN  268
  • eBay  331
  • MySpace  500
• Use at least 2 but no more than 4 aliases (hostnames) for images from a single HTML page because the browser will download 2 objects in parallel per alias.  More aliases leads to CPU thrashing and more DNS lookups.
• 14 Rules (in rough priority order):
  1. Make fewer HTTP requests
     • Use image maps to reduce # of images.
     • Use CSS sprites; <span style=”background-image: …; background-position: -100px -100px;”>.
     • Use inline images, but not supported in IE; binary of image is in HTML! (The binary is in the HTML?!? Oh my god, that hurts my sensibilities!)
  2. Use a CDN (like Akamai; not practical for small sites)
  3. Add an Expires header (set it far in the future)
  4. Gzip components (not just html files but all non-binary ones of a non-trivial size)
  5. Put CSS at the top
     • Where you’re supposed to, because pages don’t layout until all the .css files are downloaded.
  6. Move JS to the bottom
     • Not where you expect to put it.  Put it as late as possible in the code because downloading .js files block the browsers from parallel downloading of other assets (like images).
  7. Avoid CSS expressions (ones that are calculated off other things; way too much processing)
  8. Make JS and CSS external (this makes it cacheable)
  9. Reduce DNS lookups
  10. Minify JS (“minify” is a word? Huh, I guess it is.  In dev-talk, it means to remove unnecessary whitespace.)
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Turn off ETags
      • Entity tags prevent caching by the browser because ETags are never the same for the same asset across different servers, so for a multi-server farm, it does a lot of harm.
  14. Make AJAX cacheable and small

Update: They posted the presentation; it’s been the best session so far, IMHO.