Steve Sounders: "Web Performance Analysis", Velocity 2009 Day One

June 23, 2009 Pivotal Labs

Quick report from Steve Sounders’ workshop at Velocity 2009, current Googler, author of High Performance Websites.

Short version: he has a new brand new book out, and if you’re interested in any of the following tips you should probably buy it:
Even Faster Web Sites

Resources:

  • cuzillion – model your page and see how various browsers load it using Firebug’s Net tab or…

  • httpwatch works in IE and Firefox

  • pagespeed – A little like (YSlow)[http://developer.yahoo.com/yslow/] (Steve uses a combo of YSlow and Pagespeed day-to-day) but gives you a different set of perf information, notably what % of functions in your script are actually invoked in the header, vs afterwards.

  • spriteme A tool that Steve developed and just released, which looks to be a major leap in css sprite-generation technology – i.e. it doesn’t just do the (easy) part where all the images get combined together. You get css help, etc.

  • smush.it Uses non-lossy image optimization methods to reduce the number of bytes your images take.

Some tips (I’m assuming these all get better/more elaborate treatments in his book):

  • For over 95% of websites, the vast majority (80%) of the time spent in page load is spent on the front end (i.e. only 10-20% is spent transferring html).

  • Scripts block other elements from downloading. So while js is downloading and executing, nothing else can be downloaded.

  • Typically only 25% of js functions are called before body onLoad (pagespeed helps you see what % this is for you). So one thing to consider when optimizing is lazy-loading the other 75%.

  • There are tricks you can use to pull down scripts in parallel, for instance by creating script tags through document.createElement and attaching to the dom. But there are other techniques, and pitfalls for many of them in different browsers. He goes through the strategy decision tree in the new book.

  • Bad: stylesheet tag followed by an inline script. This stops all the parallel resource loading and forces the browser to only download the js, then continue.

  • Using different domains for assets. A well-known trick. Steve adds that returns diminish around 2-4 domains. Also points out that the browser doesn’t care about whether these are actually separate hosts, just that the actual names are different, so you could use a simple CNAME record to make this work with one server.

  • Flush the document early. Particularly header sections (some common images + html). In addition to the raw speed benefit, Google user testing shows this is very positive for user perception – they get visual feedback earlier and have a perception that it’s a “fast page”.

  • Note that FF 3.5+ contains an interesting new event: MozAfterPaint – a great way to see when the browser decides to repaint parts of the page. See John Resig’s post on MozAfterPaint for more.

And don’t miss stevesounders.com

About the Author

Biography

Previous
Jeff Hammerbacher: "Hadoop Operations", Velocity 2009 Day One
Jeff Hammerbacher: "Hadoop Operations", Velocity 2009 Day One

Jeff is Chief Scientist at Cloudera, which helps enterprises with Hadoop implementations. Hadoop consist...

Next
Tweed Update: v0.9.7
Tweed Update: v0.9.7

A new version of Tweed is available! (v.0.9.7) Bug Fixes Tapping notification banner/dashboard does not l...

×

Subscribe to our Newsletter

!
Thank you!
Error - something went wrong!