Issue link: https://read.uberflip.com/i/1146286
124 | Chapter 15: Deconstructing 10 Top Sites MSN uses IFrames to insert five ads into the page. As discussed earlier, with regard to eBay, using IFrames is an easy way to remove dependencies between the ads sys- tem and the HTML page generation system. However, each IFrame results in an additional HTTP request. In the case of MSN, each IFrame's SRC attribute is set to about:blank, which doesn't generate any HTTP traffic. However, each IFrame con- tains an external script that inserts an ad into the page using JavaScript and document.write. Integrating the ad system and the HTML page generation system would preclude the need for these five HTTP requests. Instead of requesting a script that contains multiple document.write statements, that JavaScript could be inlined in the HTML document. Rule 1: Make Fewer HTTP Requests The MSN home page has four scripts (other than the scripts used for ads), three of which are loaded very close together and could be combined. It also has over 10 CSS background images. These could be combined using CSS sprites. Rule 3: Add an Expires Header One script is not cacheable because its expiration date is set in the past. The five scripts used to insert ads also have an expiration date in the past, and so they aren't cacheable. It's likely the JavaScript couldn't be cached, but if the ads were inserted into the HTML page itself, these five external script files wouldn't be required. Rule 4: Gzip Components Two scripts and two stylesheets are not gzipped. Also, the five scripts used to serve ads are not gzipped. Rule 9: Reduce DNS Lookups Twelve domains are used in the MSN home page. This is more than most web pages, but we'll discuss later how this is a benefit in increasing parallel down- loads. Rule 10: Minify JavaScript The five scripts used to serve ads are not minified. Rule 13: ETags—Configure ETags Most of the components in the page have ETags that follow the default format for IIS. The same images downloaded from different servers have different ETags, meaning they will be downloaded more frequently than needed. Several noteworthy performance optimizations exist in the MSN home page: • It uses a CSS sprite (http://stc.msn.com/br/hp/en-us/css/19/decoration/buttons.gif ), one of the few 10 top web sites to do so (the others are AOL and Yahoo!). This sprite is shown in Figure 15-18.
