Recommendations

PageSpeed
YSlow

PageSpeed: Put CSS in the document head

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 recommendation?

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.

Summary

CSS
High
Easy
99%

PageSpeed 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