How to Eliminate render-blocking resources and unused Js

nikz35
Shopify Partner
79 0 23

I tried to see the unused code via coverage tool but after removing those codes site is crashing. In case of Eliminate render-blocking resources these three files are need to properly run the site .

nikz35_0-1659317305349.png

 

Replies 3 (3)

PageFly-Victor
Shopify Partner
7865 1785 3050

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

 

Regarding your concern about to solve the eliminate render-blocking and remove unused Javascript. First of all i need you to duplicate the theme file before make any changes to it.

Lets talk about eliminate render-blocking

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

The browser only pulls in the stylesheets for the device type when you add media attributes to CSS links.

And we fix this by : add the attribute to the resource and make it load in the proper way
To add it you need to find: Online stores > Themes > Edit code and theme.liquid

PageFly_0-1659319113237.png

 

 

About remove unnecessary JS, i think that is not possible because if you remove it the whole theme site function will break because that is unused in one page but useful in a lot of different pages.

 

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

PageFly

nikz35
Shopify Partner
79 0 23

i have tried the defer option but all the elements shown are critical thing. When i defer the glightbox.js, then the counter on the homepage is not working.

Cedcommerce
Shopify Expert
718 76 112

Hi @nikz35,

 

 

We have a few suggestions based on your query. Hope it will help you resolve the same.

 

  1. The render-blocking resources are caused by both javascript and CSS files.
    For CSS, you can preload the CSS files as shown in the example below:  

<link rel=”preload” as=”style” href=”{{ ‘css_file.css ’ | asset_url  }}”/>

and then add the CSS normally you do in Shopify: 

<link rel=”stylesheet” href=”{{ ‘css_file.css ’ | asset_url  }}”/>

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

<script src=”{{ ‘script_file.js ’ | asset_url  }}” async></script>

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

<script src=”{{ ‘script_file.js ’ | asset_url  }}” defer></script>

Using the above keywords ensures that the render-blocking issues are removed from the script files.   

 

  1. 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 malfunction in the website. 

 

If you wish to remove unused javascript issues coming through the Facebook sales channel script and google tag manager, you need to hire a developer to help you with these problems.

 

Hope it gets resolved. Let us know if you need any other help.


All the best,

Team CedCommerce.

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here