FROM CACHE - en_header

To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

How to Eliminate render-blocking resources and unused Js

nikz35
Shopify Partner
73 0 23
‎07-31-2022 09:28 PM

How to Eliminate render-blocking resources and unused Js

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

 

1,385 Views
0 Likes
Report
Replies 4 (4)
PageFly-Victor
Shopify Partner
5549 975 2321
‎07-31-2022 09:58 PM

Re: How to Eliminate render-blocking resources and unused Js

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

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

1,377 Views
0 Likes
Report
nikz35
Shopify Partner
73 0 23
‎08-01-2022 04:07 AM

Re: How to Eliminate render-blocking resources and unused Js

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.

1,258 Views
Report
Cedcommerce
Shopify Expert
531 57 89
‎08-01-2022 09:33 AM

Re: How to Eliminate render-blocking resources and unused Js

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
1,199 Views
0 Likes
Report
BoostStar
Shopify Partner
4 0 0
‎10-28-2022 07:18 AM

Re: How to Eliminate render-blocking resources and unused Js

@nikz35 
100% Solution on render blocking resources. 

Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen.

Add this code for rending blocking issues in the <head> tag.

For Css -
<link rel="preload" as="style" href="file_path">
For Js -
<link rel="preload" as="script" href="file_path">
For Font -
<link rel="preload" as="font" href="file_path">

We are the experts especially for Speed optimization & Performance. and want to bring revolution so that shopify owners can escape from the speed frauds. and optimize their store speed with accuracy , great results and very reasonable prices.


We Are The Doctor, Make Shopify Sites Booster. 
For more information Visit - https://booststar.rlchats.com/

BOOST STAR
818 Views
0 Likes
Report

Community Blog Articles

circuits-on-a-whiteboard.jpg
5 Things I Wish I knew Before Starting a Business

Learn these 5 things I had to learn the hard way with starting and running my own business

By Kitana Jan 27, 2023
em_01.png
Building the perfect campaign on the Google Shopping channel - tips from Em...

Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...

By Gabe Jan 6, 2023
em_01.png
How to Launch A Career With Community Forums: Talking with Emmanuel Flossie...

How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...

By Skye Dec 30, 2022
Terms of Service Privacy Policy