Building Performance Into the New Yahoo! Homepage

Web Performance 209/210
Average rating: ****.
(4.57, 37 ratings)

The new Yahoo! homepage, released in 2009, had a high bar to meet in terms of performance. The classic version of the page, a mostly static one, set lofty expectations for the newer version. Even though the new page has more options for customization and personalization, as well as being far more interactive, the performance goals remained the same. The team planned for performance from the beginning, laying groundwork that would allow us to avoid common performance pitfalls.

The team scoured Yahoo!‘s Exception Performance guidelines and went beyond them, coming up with several twists that introduced incremental performance improvements. Every byte was counted, everything measured, to ensure we could meet the previous version’s metrics.

In this talk, I’ll go over the tactics that we took and the performance differences we made. Some of the topics include:

  • How we decreased the average time to open up an application from 7 seconds to less than 2.
  • How lazy loading of resources sped up the user experience.
  • How we progressively trimmed kilobytes of data from the initial payload.
  • How we changed our page flushing strategy to alter perceived performance.
Photo of Nicholas Zakas

Nicholas Zakas

Box

Nicholas C. Zakas is a principal front end engineer at Yahoo!, where
he works on the Yahoo! homepage, is a contributor to the YUI library,
and teaches classes on JavaScript to employees and Yahoo! Juku
participants. Nicholas also is the author of Professional JavaScript, co-author of High Performance JavaScript,
co-author of Professional Ajax, and a contributor to the book
Even Faster Web Sites in addition to over a dozen online articles.
Prior to the homepage, Nicholas worked on My Yahoo!, helping to bring
the world’s most popular personalized homepage into the Web 2.0 era.

Comments on this page are now closed.

Comments

Picture of Mark J. Levitt
Mark J. Levitt
06/24/2010 2:38am PDT

Amit, looks like the slides are up now!

AMIT KUMAR
06/23/2010 10:21am PDT

Great session .. lot of information.. Thanks .. please upload the slides.

Picture of Daniel Lamb
Daniel Lamb
06/23/2010 9:36am PDT

fantastic session thank you, thank you!

Picture of Steve Souders
Steve Souders
05/18/2010 9:03am PDT

Nicholas and I have worked together on numerous occasions, including the chapter he contributed to Even Faster Web Sites. It’s rare to find someone who intersects guru, evangelist, and hands on developer. The insights from such people are valuable, and Nicholas will deliver on that promise. I’m a strong advocate of progressive enhancement. Folks interested in this talk might also want to attend Annie’s workshop Progressive Enhancement: Tools and Techniques .

For Velocity China sponsorship information for companies outside China, contact Yvonne Romaine at yromaine@oreilly.com.

  • Google
  • Strangeloop
  • Yahoo! Inc.
  • Dyn Inc.
  • Facebook
  • Schooner Information Technology
  • Tilera
  • AlertSite
  • AppDynamics
  • Aptimize
  • CDNetworks
  • Circonus
  • Cloudscaling
  • Clustrix
  • Coradiant
  • Dell
  • DTO Solutions
  • MaxiScale
  • Neustar
  • Nokia
  • NorthScale, Inc.
  • Shopzilla
  • Splunk
  • Virident
  • Zoompf
  • Neustar

For information on exhibition and sponsorship opportunities at the conference, contact Yvonne Romaine at yromaine@oreilly.com

Download the Velocity Sponsor/Exhibitor Prospectus

Download the Media & Promotional Partner Brochure (PDF) for information on trade opportunities with O'Reilly conferences or contact mediapartners@ oreilly.com

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

To stay abreast of conference news and to receive email notification when registration opens, please sign up for the Velocity Conference bulletin (login required)

View a complete list of Velocity contacts