Biomehanika Biomehanika - 4 months ago 10
CSS Question

Solve blocking CSS by placing external sheets on bottom of <body>

I am optimizing a website load, and find the (usual, I suppose) message from Google's PageSpeed Insights 'remove blocking CSS from top of your website'.

I have searched the non-javascript solutions for this, and it seems that placing CSS at the bottom of the body (as sripts) would avoid this page speed increment because of this files place.

I am in doubt because:


  • I have never found a website with the CSS files on the bottom of it.

  • I find dangerous having CSS files on the bottom due to the fact that the
    website could load with no CSS from the beginning.



Which is the usual solution for this issue? Is there any way of loading CSS external sheets asynchronously without JS?

Answer

You can split your CSS into two parts. The first one contains the code to render the content "above the fold". This is what you see without scrolling. The rest can be included at the bottom of your page.

The advantages:
Your Browser only get the important code to render in order to provide the user as soon as possible a seemingly rendered page, while the browser renders the bottom of the page "in background".

But in my tests, it does not have as great an impact on the page-speed.