YSlow: Put CSS at the top More Recommendations

Page Speed
YSlow

Rule Summary

Type: CSS
Priority: Medium
Difficulty: Easy
Average Score: 99%

Overview

Keep style sheets in headers to ensure progressive rendering.

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.

Contribute to this recommendation

Have an opinion, link, or other contribution to share regarding this recommendation? Share it with us and help make the web a faster place!