Issue link: https://read.uberflip.com/i/1146286
42 | Chapter 5: Rule 5: Put Stylesheets at the Top Figure 5-2 also shows that the overall time for each page to load (including all of the page's components) is the same: about 7.3 seconds. It's surprising that the pages that feel slower, css-bottom.php and css-top-import.php, actually download all the page's necessary components faster. They finish downloading the HTML page and all six images in 6.3 seconds, while css-top.php takes 7.3 seconds to download the page's required components. It takes css-top.php one second longer because it downloads the stylesheet early on, even though it's not needed for rendering. This delays the download of the six images by about one second. Even though the necessary compo- nents take longer to download, css-top.php displays more quickly because it renders progressively. Great! We know what to do: put stylesheets in the document HEAD using the LINK tag. But if you're like me you're asking yourself, "Why does the browser work this way?" Figure 5-2. Loading components css-bottom.php image 1 image 2 image 3 image 4 image 5 image 6 stylesheet 6.3 seconds css-top.php stylesheet image 1 image 2 image 3 image 4 image 5 image 6 7.3 seconds css-top-import.php image 1 image 2 image 3 image 4 image 5 image 6 stylesheet 6.3 seconds