Issue link: https://read.uberflip.com/i/1146286
38 | Chapter 5: Rule 5: Put Stylesheets at the Top researched and documented. In his web article, * Jakob Nielson, pioneering usability engineer, stresses the importance of visual feedback in terms of a progress indicator. Progress indicators have three main advantages: They reassure the user that the sys- tem has not crashed but is working on his or her problem; they indicate approxi- mately how long the user can be expected to wait, thus allowing the user to do other activities during long waits; and they finally provide something for the user to look at, thus making the wait less painful. This latter advantage should not be underestimated and is one reason for recommending a graphic progress bar instead of just stating the expected remaining time in numbers. In our case the HTML page is the progress indicator. When the browser loads the page progressively, the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience. The problem with putting stylesheets near the bottom of the document is that it pro- hibits progressive rendering in many browsers. Browsers block rendering to avoid having to redraw elements of the page if their styles change. Rule 5 has less to do with the actual time to load the page's components and more to do with how the browser reacts to the order of those components. In fact, the page that feels slower is ironically the page that loads the visible components faster. The browser delays showing any visible components while it and the user wait for the stylesheet at the bottom. The examples in the following section demonstrate this phenomenon, which I call the "blank white screen." sleep.cgi While building the examples of this phenomenon, I developed a tool that I've found extremely useful for showing how delayed components affect web pages: sleep.cgi. It's a simple Perl CGI program that takes the following parameters: sleep How long (in seconds) the response should be delayed. The default is 0. type The type of component to return. Possible values are gif, js, css, html, and swf. The default value is gif. expires One of three values: –1 (returns an Expires header in the past), 0 (no Expires header is returned), and 1 (returns an Expires header in the future). The default is 1. * Jakob Nielson, "Response Times: The Three Important Limits," http://www.useit.com/papers/responsetime. html.