Rule 5: Put Stylesheets at the Top(Chapter 5 of High performance Web Sites)

Frontend engineers who care about performance want a page to load progressively;
that is, we want the browser to display whatever content it has as soon as possible.
This is especially important for pages with a lot of content and for users on slower
Internet connections.The importance of giving users visual feedback has been well
researched and documented.
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 Bottom”
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.

To avoid the blank white screen, move the stylesheet to the top in the document’s
HEAD.Doing this in the sample web site I’ve called “CSS at the Top” solves all the
problem scenarios.No matter how the page is loaded—whether in a new window, as
a reload, or as a home page—the page renders progressively.
There are two ways you can include a stylesheet in your document: the LINK tag and
the @import rule. An example LINK tag looks like this:
<link rel="stylesheet" href="styles1.css">
This is an example of a STYLE block with an @import rule:
<style>
@import url("styles2.css");
</style>