Issue link: https://read.uberflip.com/i/1146286
Combined Scripts and Stylesheets | 15 .cart { background-image: url(data:image/gif;base64, );} .settings { background-image: url(data:image/gif;base64, );} .help { background-image: url(data:image/gif;base64, );} Comparing this example to the previous examples, we see that it has about the same response time as image maps and CSS sprites, which again is more than 50% faster than the original method of having separate images for each link. Putting the inline image in an external stylesheet adds an extra HTTP request, but has the additional benefit of being cached with the stylesheet. Combined Scripts and Stylesheets JavaScript and CSS are used on most web sites today. Frontend engineers must choose whether to "inline" their JavaScript and CSS (i.e., embed it in the HTML document) or include it from external script and stylesheet files. In general, using external scripts and stylesheets is better for performance (this is discussed more in Chapter 8). However, if you follow the approach recommended by software engi- neers and modularize your code by breaking it into many small files, you decrease performance because each file results in an additional HTTP request. Table 1-1 shows that 10 top web sites average six to seven scripts and one to two stylesheets on their home pages. These web sites were selected from http://www. alexa.com, as described in Chapter A. Each of these sites requires an additional HTTP request if it's not cached in the user's browser. Similar to the benefits of image maps and CSS sprites, combining these separate files into one file reduces the number of HTTP requests and improves the end user response time. Table 1-1. Number of scripts and stylesheets for 10 top sites Web site Scripts Stylesheets http://www.amazon.com 3 1 http://www.aol.com 18 1 http://www.cnn.com 11 2 http://www.ebay.com 7 2 http://froogle.google.com 1 1 http://www.msn.com 9 1 http://www.myspace.com 2 2 http://www.wikipedia.org 3 1 http://www.yahoo.com 4 1 http://www.youtube.com 7 3