High Performance Web Sites

Yahoo!

Figure 17-23. http://www.yahoo.com

Yahoo! (http://www.yahoo.com) is the fourth-heaviest page in total bytes among the ones examined in this chapter, but second in response time and YSlow grade. The Yahoo! home page team has been engaged with my performance team for years, and is constantly tracking and working to improve response times. As a result, their YSlow scores are high, and they are able to squeeze more speed out of their page.

Yahoo!'s home page has four CSS sprite images. It has been using sprites for years and was the first web site in which I encountered the use of sprites. One of these sprites is icons_1.5.gif. Looking at the list of components, we see that this image is downloaded twice. On further investigation, the issue is that two URLs reference the exact same image:

http://us.js2.yimg.com/us.js.yimg.com/i/ww/sp/icons_1.5.gif
http://us.i1.yimg.com/us.yimg.com/i/ww/sp/icons_1.5.gif

How does a mistake like this happen? Template variables are most likely used to build these URLs. The CSS rules that include this background image are both inlined in the HTML document, so presumably both had access to the same template variables. The us.js2.yimg.com hostname is used for all of the scripts, and us.i1.yimg.com is used solely for images and Flash. Most likely, the "JavaScript" hostname, us.js2.yimg.com, was accidentally used for this CSS background image.

This look at ...