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

Solved
cescapesca_86
Excursionist
20 0 12

@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

0 Likes
Steven_Tuckey
New Member
2 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!

0 Likes
SteveHoney
New Member
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.
0 Likes
Steven_Tuckey
New Member
2 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

0 Likes