YSlow: Put CSS at the top


Keep style sheets in headers to ensure progressive rendering.

How does your site score on this recommendation?

Details from Yahoo!

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer.

These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.



YSlow recommends:

Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.

The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times."

Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

Read More