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

taruunn · ‎12-31-2020

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

taruunn · ‎04-02-2021

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

View solution in original post

PaulNewton · ‎12-31-2020

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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need

Save time & money ,Ask Questions The Smart Way

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

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

scandidownunder · ‎02-18-2021

Hey @taruunn, did you manage to fix this?

I am also using Turbo theme and having EXACTLY the same issue.

taruunn · ‎04-02-2021

Not Yet but i will find one day

taruunn · ‎04-02-2021

@Jason Can you look into this

taruunn · ‎04-02-2021

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

SteveHoney · ‎04-12-2021

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 · ‎04-12-2021

Yeah But it will break your product single product image

cescapesca_86 · ‎04-23-2021

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 · ‎04-23-2021

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 · ‎04-24-2021

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

Steven_Tuckey · ‎05-12-2021

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.

Any help would be great thank you!

SteveHoney · ‎05-12-2021

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 · ‎05-21-2021

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

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

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

Community Blog Articles