Issue link: https://read.uberflip.com/i/1146286
Yahoo! | 133 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 vari- ables. 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 the use of hostnames reveals some nice performance optimizations in the Yahoo! home page. They have split their components across multiple host- names, resulting in an increase in simultaneous downloads, as shown in Figure 15-24. Also, they have chosen the domain yimg.com, which is different from the page's hostname, yahoo.com. As a result, the HTTP requests to yimg.com will not be encumbered with any cookies that exist in the yahoo.com domain. When I'm logged in to my personal Yahoo! Account, my yahoo.com cookies are over 600 bytes, so this adds up to a savings of over 25K across all the HTTP requests in the page. The names of two elements are intriguing: onload_1.3.4.css and onload_1.4.8.js. In Chapters 5 and 6 I talk about the negative impact that stylesheets and scripts have on performance (stylesheets block rendering in the page, and scripts block rendering and downloading for anything after them in the page). An optimization around this that I described in Chapter 8 is downloading these components after the page has finished loading, thus eliminating the negative blocking effect. This more extreme approach is applicable only when the stylesheet or script is not necessary for the ren- dering of the initial page. In the case of the Yahoo! home page, this stylesheet and script are most likely used for DHTML actions that occur after the page has loaded. For example, clicking on the "More Yahoo! Services" link displays a DHTML list of links to other Yahoo! properties. This functionality, which happens after the page has loaded, is contained in onload_1.3.4.css. The main improvements that could be made to the Yahoo! home page, other than removing the duplicate CSS background image described earlier, would be to reduce the number of domains (seven) and combine the three scripts that are loaded as part of the page. Minifying the HTML document (as MSN does) would reduce it from 117K to 29K. Overall, the Yahoo! home page demonstrates several advanced perfor- mance optimizations and has a fast response time given the content and functional- ity included in the page.
