PageSpeed : Put CSS in the document head

Published

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



Why should you put CSS in the document head?


External stylesheets and inline style blocks inside the document body will affect page rendering performance.
because the webpage has to download all external stylesheets first to render the page effectively.
Putting stylesheets or style tags inside <body> </body> tags will cause the page to behave strange.

<html>
<head>
Call stylesheets here inside head tag.
</head>
<body>
Don't call stylesheets here.
</body>
</html>

Solutions / Recommendation

  • As required by the HTML 4.01 Specification (section 12.3), always put external stylesheets in the section using the in the 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.


Comments

Post a Comment