Issue link: https://read.uberflip.com/i/1146286
40 | Chapter 5: Rule 5: Put Stylesheets at the Top Notice how putting stylesheets near the end of the document can delay page load- ing. This problem is harder to track down because it only happens in Internet Explorer and depends on how the page is loaded. After working with the page, you'll notice that it occasionally loads slowly. When this happens, the page is completely blank until all the content blasts onto the screen at once, as illustrated in Figure 5-1. Progressive rendering has been thwarted. This is a bad user experience because there is no visual feedback to reassure the user that her request is being handled correctly. Instead, the user is left to wonder whether anything is happening. That's the moment when a user abandons your web site and navigates to your competitor. Here are the cases where putting stylesheets at the bottom of the document causes the blank white screen problem to surface in Internet Explorer: In a new window Clicking the "new window" link in the example page opens "CSS at the Bot- tom" in a new window. Users often open new windows when navigating across sites, such as when going from a search results page to the actual target page. As a reload Clicking the Refresh button, a normal user behavior, is another way to trigger a blank white screen. Minimize and restore the window while the page is loading to see the blank white screen. As a home page Setting the browser's default page to http://stevesouders.com/hpws/css-bottom.php and opening a new browser window causes the blank white screen. Rule 5 is important for any team that wants its web site to be used as a home page. Figure 5-1. The blank white screen