Issue link: https://read.uberflip.com/i/1146286
55 Chapter 8 CHAPTER 8 Rule 8: Make JavaScript and CSS External8 Many of the performance rules in this book deal with how external components are managed, such as serving them via a CDN (Rule 2), making sure they have a far future Expires header (Rule 3), and compressing their contents (Rule 4). However, before these considerations arise, you should ask a more basic question: should Java- Script and CSS be contained in external files or inlined in the page itself? As we'll see, using external files is generally better. Inline vs. External Let's first start with the tradeoffs in placing JavaScript and CSS inline versus using external files. In Raw Terms, Inline Is Faster I have generated two examples that demonstrate how inlining JavaScript and CSS results in faster response times than making them external files. Inlined JS and CSS http://stevesouders.com/hpws/inlined.php External JS and CSS http://stevesouders.com/hpws/external.php The inline example involves one HTML document that is 87K, with all of the Java- Script and CSS in the page itself. The external example contains an HTML docu- ment (7K), one stylesheet (59K), and three scripts (1K, 11K, and 9K) for a total of 87K. Although the total amount of data downloaded is the same, the inline example is 30–50% faster than the external example. This is primarily because the external example suffers from the overhead of multiple HTTP requests (see Chapter 1 about the importance of minimizing HTTP requests). The external example even benefits from the stylesheet and scripts being downloaded in parallel, but the difference of one HTTP request compared to five is what makes the inline example faster.