PageSpeed Insights it is showing Eliminate render-blocking resources 1 . 12s How to resolve it?

Technical Q&A
1

Screenshot_1.png
Screenshot_1.png1877×1810 245 KB

2

Hi @grkarthik ,
In order to work on the ‘eliminate render blocking resources’, you have to apply two different techniques for CSS and JS files.
For CSS files:
you have to preload the CSS files as shown in below

{% comment %}preload the css file as in below line.{% endcomment %}

{% comment %} use the preloaded css file like normally you do on shopify.{% endcomment %}

To work on JS files you have to work using ‘async’ and ‘defer’ attributes of html.
async is used to allow downloading of resources and execute the script whenever required.

whereas defer is used to allow javascript execution only when the html has fully parsed.

{% comment %} ASYNC EXAMPLE {% endcomment %}

{% comment %} DEFER EXAMPLE {% endcomment %}

as in the image you shared you need to add the async attribute to the jquery script tag and add defer tags on all jquery dependent js script files. While using async and defer you have to ensure that there are no inline or internal scripts written else this will raise an error.

To learn more about eliminate render blocking resources you can refer to this link.

Thanks & Regards
KaalTech

3

Hi @grkarthik ,

I’m Richard Nguyen - CRO Expert at PageFly.

I’d like to recommend the steps below in order to eliminate Render-Blocking resources:

The CSS - JS needed to render the above-the-fold sections of the page should be delivered inline in the HTML(Critical CSS).

  1. For CSS, you can preload the CSS files as shown in the example below:
and then add the CSS normally you do in Shopify:
  1. For Javascript files, you can use async and defer attributes to the script tag to remove the issue.

Defer - the defer attribute ensures that the script has to be executed only after the page has finished parsing.

!IMPORTANT: Reduce Unused Javascript issues can be fixed only when you have template-specific files. In Shopify, we have js files such as theme.js, and vendor.js, which are almost called throughout, and we cannot do anything about that because if you modify these js files, it can lead to breaking the whole site.

And that’s my feedback. Hope it’s helpful to you :blush:

Cheers!

Richard

P/s: That being said, you can check this guide for more details on how to boost page speed. And in case you would like to optimize your front store as well, you can check out our template here

4

Hello @grkarthik ,

The eliminate render-blocking resources are caused by both the javascript files and the CSS files. In order to fix the “eliminate render-blocking resources”, you have to apply two separate techniques for CSS and Javascript files.

For CSS, you can preload the CSS files as shown in the example below:

and then add the CSS normally you do in Shopify:

For Javascript files, you can use async and defer attributes to the script tag to remove the issue.

  • Async - the async attribute lets the script be executed asynchronously with the rest of the page ( the script would be executed as the webpage parsing continues).
  • Defer - the defer attribute ensures that the script has to be executed only after the page has finished parsing.

The use of both the above keywords ensures that the render-blocking issues are removed from the script files.

Hope this resolves your issue, let us know if you need any further assistance.

All the best,

CedCommerce