How To Stop Render-blocking Javascript And Css?

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 a

Solution 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.

Solution 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