What is performance?

• Performance is how fast your site works
• NOT how many users it can serve (Scalability)
• NOT how often it's down (Reliability)

Why do we need to care?

• User experience
• Money!!!
  • +100ms → -1% sales (Amazon) *
  • +400ms → -5-9% full-page traffic (Yahoo! Autos front page) **
  • +500ms → -20% searches (Google) ***
  • Some new numbers from Velocity 2009 in Steve Souders' blog
  * Make Data Useful, Greg Linden at Stanford Data Mining class, fall 2006
  ** YSlow 2.0 early preview in China, Stoyan Stefanov, December 6^th, 2008
  *** Scaling Google for Every User, Marissa Mayer at Google Seattle Conference on Scalability 2007 (video)

What's involved?

• Back-end (nothing happens until server does it's thing)
• Front-end (JS, CSS, images)
• More data loaded afterwards (AJAX)
• And some more loaded from other sites (banner, widgets, analytics "pixels")

Amazon Waterfall!

• Total Requests: 88
• Total Time: 6.344 seconds
• Back-end Time: 0.968 seconds = just 15%

CNN Waterfall!

• Total Requests: 174
• Total Time: 4.406 seconds
• Back-end Time: 0.171 seconds = less then 4%

Why JavaScript?

• blocking behavior on the network
  
• most of external data providers use JavaScript

What to do with blocking?

• do less blocking
  • move some JS to the bottom (Page Speed has a useful report)
  • block faster - minify (JSMin, YUI Compressor) and gzip it
• don't block (parallelizing techniques)
  • Steve Souders did good research with decision tree for Even Faster Web Sites
• use browser cache

What to do with banners?

• postloading banners once page is ready
• don't have "external" banners / control what's inside (almost impossible)
• no perfect solution on the market yet

Widgets

• "easy" to implement
• if provider is slow, your site is slow
• don't always load (fast) - expect to be slow (breaking look & feel)

AJAX & JSON

• don't expect it to be immediate (show progress indicator if appropriate)
• minimize backend work (memcached, static files)
• make results cacheable (when possible), always use Expires headers

Part 2: JavaScript in the browser

Ning Zhou, JavaScript Meetup (slides)

More info

• TechPresentations.org/Performance

About these slides

These slides use an HTML presentation tool Slidy.

They are valid XHTML document with rich metadata embedded using RDFa.

Licensing & Attribution