Jump to content

Yahoo's homepage: Optimizing a site while 100 million people watch

  macslocum's Photo
Posted Jun 10 2010 05:52 AM

Adding interactivity while maintaining -- or reducing -- page load time is tricky business on any site. Toss in the expectations of 100 million monthly users, and that optimization project's degree of difficulty increases exponentially.

Nicholas Zakas, Yahoo's principal front end engineer and a speaker at the upcoming Velocity conference, encountered this particular scenario when Yahoo overhauled its homepage in 2009. In the following Q&A, Zakas previews some of the lessons he'll share in his Velocity session and he reveals his single most important web performance metric.

How much monthly traffic does the Yahoo home page receive?

Nicholas Zakas: 100 million uniques per month in the U.S.

Nicholas ZakasAs a developer, do you change your mindset when you're working on a page that gets that kind of traffic?

Nicholas Zakas: Yes, everything must scale. For instance, if you make a decision that results in a single extra request to the application server, you need to stop and consider if you have capacity for that. Things like, "Hey, let's automatically update the page by sending a request every minute" become a bit more complex because of the sheer volume of extra requests we'll receive. I like to say that there's solving a problem, and then there's solving a problem at Yahoo scale. They aren't always the same thing.

What are the most important performance metrics?

Nicholas Zakas: I believe that the single most important performance metric is what I call "time to interactivity," which is basically the time between when the user makes the request and the time at which the user can successfully complete the task that they want to do.

For instance, on the homepage I want a user to be able to perform a search, see if they have new mail, or click through on a news article of interest. That's where I think some of the Ajaxy sites fall down: the time to interactivity is long because everything requires Javascript. We've worked hard to keep the time to interactivity as short as possible on the homepage while still progressively enhancing the page with Javascript if the user happens to stay on the page longer.

How did you add customization to the Yahoo homepage and maintain/reduce load time?

Velocity conference 2010Nicholas Zakas: Our overall approach was to reduce the time to interactivity, which basically resulted in a two major themes.

The first theme was reducing the amount of Javascript loaded during the page load. Since Javascript completely blocks interactivity, we wanted to lazy load as much as possible. The result is that we lazy load almost all of our Javascript, which works great on a progressively-enhanced site.

The second major theme was to avoid loading anything on page load that wasn't to be used. We went through and counted bytes, trying to figure out places where we could eliminate code. In one case, I noticed that our redirect URLs were going through our domain, yet always included http://www.yahoo.com in the URL. By changing from absolute URLs to relative URLs, we were able to chop 2KB off of the page size.

This interview was condensed and edited.


1 Subscribe

0 Replies