如何停止渲染阻止Javascript和CSS？

Question

I have tested my page on Google PageSpeed Insights and It keeps saying "Eliminate render-blocking JavaScript and CSS in above-the-fold content"

It says I have 17 blocking scripts and 11 blocking CSS resources.

I have tried moving all of the JS to the bottom of the page to load it last however Google is still saying I have render-blocking JS...

Does anyone know how I can solve this?

Thank you in advance for any help.

Answer 1

You need to dig more into Critical Rendering Path study.

Simple Rule: In your webpage load only things which are really important to show to user. Rest things can be loaded after page load has been done.

When JS is being downloaded on page, it stops DOM generation and hence stop downloading other resources. Putting JS at bottom will work but still it will block your rendering when JS is being downloaded. Just to overcome this issue it is suggested to add async tag to your script tag. But adding async can lead to other issues. See here . More reading about this can be found here .

Same case applies to CSS but advantages is that it will not block DOM generation. More reading about this can be found here .

Answer 2

Hi I tried it but it slowed down the website not sure why so put it back saying Eliminate render-blocking JavaScript and CSS on Googles page insite.

If any one knows why by removing the blocking css it slowed down the website enter image description here