0

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.

Improve this question
5
  • 2
    possible duplicate of Eliminate external render-blocking Commented May 30, 2015 at 15:22
  • Thats about CSS not js. Commented May 30, 2015 at 15:36
  • Note: Your current question-title asks for "How to stop render-blocking Javascript and CSS?" and in your question-text you mention: "11 blocking CSS resources". The accepted answer on the suggested possible duplicate talks about both javascript and css and provides an initial insight in the suggested solution to both. Thanks for the Q though, I wasn't aware of yet another argument in my arsenal against inline js/css haters (funny it is again Google that suggests this, quite some others in my collection are also from leading google-devs by the way). Commented May 30, 2015 at 15:41
  • Note: I am quoting what Google tells me not the words from my own mouth. as you can see from this line "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..." Im purely talking about JS. Commented May 30, 2015 at 15:49
  • 1
    It was just a response to your comment "Thats about CSS not js". Also I wanted to hint to you that there IS a helpful suggestion in the accepted answer: Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load, so just moving all javascript to the end of your html isn't necessarily a solution. Instead, you might want to search the javascript if there are things in there that are required for initial page-layout.. Was just trying to help (especially since there isn't any refactored code you are sharing for your specific case..). Commented May 30, 2015 at 15:52

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.