Put CSS in the Document Head

How does putting the CSS in the Document Head works and what Advantages it brings

Method Type: User (.CSS)

(This means that the method is handled by the user)


Status: Must be applied by the user.



Cascading Style Sheet (CSS) is the element that is read first by the web browser when loading a page. The browser will not render the page until all stylesheets have been downloaded and parsed.


How Putting the CSS in the document head works:

It is important to put the inline style blocks and references to external stylesheets in the head of the page. If they are in the body of a page they can significantly reduce the loading speed and even cause reflows that will further hit the performance of your website. You can use the


tag in the head of a document to reference external stylesheets and the


tag for inline stylesheets.


Putting CSS in the document head provides the following Advantages:

No content shifting during page load
No reflow caused by the CSS being in the body of the page
Increased loading page speed