Rules  1  2  3  4  5  6  7  8  9  10  11  12  13  14 
Rule 5 - Put Stylesheets at the Top
 Examples  1  2  3  4 
Example 4 - CSS Flash of Unstyled Content

Putting stylesheets in the HEAD of your document not only improves page load times, it also avoids the browser having to repaint the page when later stylesheets are downloaded. This is called the Flash of Unstyled Content (FOUC).

In this example the stylesheet is included at the bottom of the document, but its css rules are used in the main part of the document. The text is rendered and then after the stylesheet is downloaded the entire page must be repainted to reflect the new styles. In IE this only occurs when:

In Mozilla-based browsers it happens under all scenarios for loading a page (typing the address, clicking a link, reloading a page, etc.).

Always put your stylesheets in the document HEAD using the LINK tag.

stevesouders.com | contact SteveGreyhound, the 2nd fastest land animalThis is the companion website for High Performance Web Sites by Steve Souders.