Solved

Model Viewer js is slowing page speed / scripts are loading in my head section , how to remove

taruunn
Excursionist
19 5 7

taruunn_0-1609409668633.png

 

 

I do not use any 3D product or model viewer but two scripts are loading in my head 

https://cdn.shopify.com/shopifycloud/model-viewer/v0.8/vendors~mv.js

https://cdn.shopify.com/shopifycloud/model-viewer/v0.8/model-viewer.js

 

I'm using Turbo theme , I tried everything to remove this but it loaded in head dynamically 

Accepted Solution (1)
taruunn
Excursionist
19 5 7

This is an accepted solution.

taruunn_0-1617377351167.png

Try this rename this with any wrong name in section.js & theme will never call this js 

 

View solution in original post

Replies 13 (13)

PaulNewton
Shopify Partner
6274 573 1319

For excess system scripts this depends on whether they are loaded as part of the base theme or if they are being injected in the <head> from the {{ content_for_header}} tag.

Make a duplicate theme and test the duplicate theme by commented out the {{ content_for_header}} tag.

 

See if it's part of the base theme try:

Make sure any theme settings for 3D models are turned off.

If that doesn't work you'll have to go through your theme and possibly find any media areas and scripts that are used for 3D models and disabling those with comments.

Possibly including checking theme.js or other scripts for logic that loads the excess.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


scandidownunder
Visitor
1 0 0

Hey @taruunn

taruunn
Excursionist
19 5 7

Not Yet but i will find one day 

taruunn
Excursionist
19 5 7

@Jason Can you look into this 

taruunn
Excursionist
19 5 7

This is an accepted solution.

taruunn_0-1617377351167.png

Try this rename this with any wrong name in section.js & theme will never call this js 

 

SteveHoney
Visitor
3 0 0

It's better to comment out the entire block with a note than randomly rename file versions - they just look like typos that way.

Note there are two occurences of the code to coment out in assets/sections.js

 

 

/* Disable 3D viewer scripts
    // Ensure product media libraries are present
    if (!isIE11) {
      window.Shopify.loadFeatures([
        {
          name: 'model-viewer',
          version: '0.8'
        },
        {
          name: 'shopify-xr',
          version: '1.0',
        },
        {
          name: 'model-viewer-ui',
          version: '1.0',
        }
      ], productMedia.setupMedia)
    }
*/

 

 

taruunn
Excursionist
19 5 7

Yeah But it will break your product single product image 

cescapesca_86
Excursionist
20 0 13

Hi, I have the same issue but I'm using the Flex theme (from the same company as the Turbo theme). I cannot find any files called section.js.liquid like in the accepted solution. Can anyone help me, please?

SteveHoney
Visitor
3 0 0

Flex has partial JS files for sections, I don't have a copy of it locally but it looks likely to be in:

assets/scripts/sections/jsProduct.js

However I would be careful editing JS files if you are not familiar - the admin theme code editor does not store previous versions of JS files so it's possible to break things quite easily with no way to revert. Have a read of this:

https://help.outofthesandbox.com/hc/en-us/articles/360033812234

cescapesca_86
Excursionist
20 0 13

@SteveHoney Thank you so much! If anyone else is looking for it for the Flex theme, it's in a file called  z__jsProduct.js under "assets". I just commented it out but as my theme is not live yet, I can't tell you yet if it broke anything or not. In the preview, everything seems to be working fine still, including the videos I have uploaded on product pages. I use photos and videos in the gallery, no 3D images.Screenshot 2021-04-24 at 10.27.52.png

Steven_Tuckey
Visitor
3 0 0

Hi SteveHoney,

This solution worked perfectly for us, so thank you very much. I have two questions if you don't mind answering them for me:

1) You said there were two occurences for this code to comment out in assets/sections.js. Does this mean there is another section that I would need to comment out (aside from the one displayed) and if so, do you use the same process?

2) Would this solution work for other unused javascript? I was hoping to clear up two more sections to hopefully improve my speed.Screen Shot 2021-05-12 at 4.20.21 pm.png

Any help would be great thank you!

SteveHoney
Visitor
3 0 0

Hey Steven,

1. Yep the same call to the Shopify model viewer scripts is repeated around line 770~ of sections.js, do exactly the same . This will take care of the first script in your screenshot (vendors~mv.js is being added by that block - I assume the screenshot was taken on your product page).

 

2. Don't go removing vendors.js! This conains the essential 3rd party libraries that are utilized in Turbo. There are some tactics to reduce that file size though. If you open it up you will see it consists of 11 libraries quite clearly separated, below I've noted where you may be able to remove some of them:

#Zoom - If you have the "Magnify product images on hover" feature ticked/turned on you need this, if not can be deleted.
#Cookie - Essential/Requied
#Waypoints - Hard one to pin down 100% so best left
#Responsive iFrames - used by video embeds/sections, if you have none could be deleted
#Pointer events polyfill - Essential/required
#Flickity - All sliders and galleries, you almost certainly need it
#URL parser - Essential/required
#Object-fit polyfill - Essential/required
#Offscreen check - Essential/required
#Lazyframe - if you are video free and removing Responsive iFrames this could go too
#Fancybox - if you have the product page gallery lightbox enabled (or use the size guide modal) you use this, if not it can potentially be removed (quite a big saving)
#Plyr - only required if you have video
 
I'm assuming you have a test store environment to try trimming libraries from this file. Fair warning - accidentlaly removing the first line of another library in there will pretty much tank a live site in JS errors!
You may well need to then also go and verify there are no errors on the frontend where tose libraires are called/instansiated in other JS files in the theme. It's not for the feint hearted but as Lighthouse/Web Vitals strongly dislike unused JS then this is a reasonable - but not risk free - tactic.
Steven_Tuckey
Visitor
3 0 0

Hi Steve,

Thank you for taking the time to give me a thorough run through of what to do. Apologies for the late reply.

The first fix is done (removing the 2nd piece of script for the model viewer), and I have had a play around with the other vendor elements. I have tried out removing #Responsive Iframes, #Lazyframe and #Plyr as suggested (the site doesn't use video). My knowledge of code is VERY rudimentary, so I didn't have too much luck. I am going to have another try of it in the next few weeks. I will let you know if I'm successful.

Thanks again,

Steven