Page Speed: Put CSS in the document head More Recommendations

Rule Summary

CSS
High
Easy
98%

Overview

Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.

How does your site score on this rule?

Details from Google

Specifying external stylesheets and inline style blocks in the body of an HTML document can negatively affect the browser's rendering performance. Browsers block rendering a web page until all external stylesheets have been downloaded. Inline style blocks (specified with the <style> tag) can cause reflows and shifting of content. Therefore, it's important to put references to external stylesheets, as well as inline style blocks, in the head of the page. By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page.

recommends:

  • As required by the HTML 4.01 Specification (section 12.3), always put external stylesheets in the <head> section using the in the <link> tag. Don't use @import. Also make sure that you specify the stylesheets in the correct order with respect to scripts.
  • Put <style> blocks in the <head> section.

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!