Issue link: https://read.uberflip.com/i/1146286
16 | Chapter 1: Rule 1: Make Fewer HTTP Requests To be clear, I'm not suggesting combining scripts with stylesheets. Multiple scripts should be combined into a single script, and multiple stylesheets should be com- bined into a single stylesheet. In the ideal situation, there would be no more than one script and one stylesheet in each page. The following examples show how combining scripts improves the end user response time. The page with the combined scripts loads 38% faster. Combining stylesheets produces similar performance improvements. For the rest of this section I'll talk only about scripts (because they're used in greater numbers), but everything discussed applies equally to stylesheets. Separate Scripts http://stevesouders.com/hpws/combo-none.php Combined Scripts http://stevesouders.com/hpws/combo.php For developers who have been trained to write modular code (whether in JavaScript or some other programming language), this suggestion of combining everything into a single file seems like a step backward, and indeed it would be bad in your develop- ment environment to combine all your JavaScript into a single file. One page might need script1, script2, and script3, while another page needs script1, script3, script4, and script5. The solution is to follow the model of compiled languages and keep the JavaScript modular while putting in place a build process for generating a target file from a set of specified modules. It's easy to imagine a build process that includes combining scripts and stylesheets— simply concatenate the appropriate files into a single file. Combining files is easy. This step could also be an opportunity to minify the files (see Chapter 10). The diffi- cult part can be the growth in the number of combinations. If you have a lot of pages with different module requirements, the number of combinations can be large. With 10 scripts you could have over a thousand combinations! Don't go down the path of forcing every page to have every module whether they need it or not. In my experi- ence, a web site with many pages has a dozen or so different module combinations. It's worth the time to analyze your pages and see whether the combinatorics is manageable. Conclusion This chapter covered the techniques we've used at Yahoo! to reduce the number of HTTP requests in web pages without compromising the pages' design. The rules described in later chapters also present guidelines that help reduce the number of HTTP requests, but they focus primarily on subsequent page views. For components that are not critical to the initial rendering of the page, the post-onload download technique described in Chapter 8 helps by postponing these HTTP requests until after the page is loaded.