YSlow: Put CSS at the top More Recommendations

Rule Summary

CSS
Medium
Easy
97%

Overview

Keep style sheets in headers to ensure progressive rendering.

How does your site score on this rule?

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.

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

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!