0

I have minified JS and CSS and optimized images. Used async="async" in js where it is applicable. How to fix "Eliminate render-blocking JavaScript and CSS in above-the-fold content"

Any Ideas?

Improve this question
0
0

You have to add async and defer attributes to your js params.

  • async : load / execute scripts asynchronously.
  • defer : defer execution at the end of loading the document.

So go to: app/design/frontend/{package}/{theme}/layout/page.xmlif you haven't it copy it from app/design/frontend/base/default/layout/page.xml

Replace :

<action method="addJs"><script>prototype/prototype.js</script></action>

With :

<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>

<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

Improve this answer
3
  • It's not working, when I added async and defer as per your instruction,stop working all js files and getting errors. – Randhir Yadav Jul 29 '17 at 7:17
  • We can not resolve this fully in some cases.for more details look this post.stackoverflow.com/a/45386507/4373980 – Randhir Yadav Jul 29 '17 at 7:20
  • @Yogesh, please tell me how you did fix this issue? – CodeForGood Jun 23 '20 at 13:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.