1

It seems to me that anytime there is a <script src="name1.js"> or a <link href="name2.css"> statement in the <head>, these two files block rendering of the markup.

FWIW, I have tried adding "async" to the <script> tag and it totally messes up some of my jQuery plug-ins

Given that, I really do not understand the phrase "Render-blocking Javascript and CSS".

Thanks!

Improve this question
2
  • Keep your CSS in head and JS to the end of body Commented Aug 24, 2015 at 4:51
  • @JohnLove it might be the issue with your importing the sequence of your js and css files Commented Aug 24, 2015 at 5:22

2 Answers 2

Reset to default
3

They block rendering of markup because the browser parses the HTML file from top down.

You can avoid this by placing the script tag before the closing body:

  <script src="whatever.js"></script>
</body>

You're out of luck with link elements, unless you just use inline style declarations in the head (probably not a good idea).

You can also use the async attribute in the script tag, or you can use one of any numerous async JavaScript libraries.

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

Comments

0

You can also try to load the critical css first before loading the main/minified css file to avoid render blocking on CSS files.

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.