How to trace loading 3x versions of jQuery + jQuery UI

[Ben31]

Hi There,

Google Lighthouse is highlighting multiple versions of jQuery and jQuery UI as low hanging fruit to remove and fix site speed (which makes total sense).

Does anyone know if the following are app related, or part of the Shopify Debut theme?

• assets/vendor.js = jQuery v2.2.3
• snippets/special-offers.liquid = jQuery v2.2.4

Also, AfterPay (AUS/NZ payment service) is loading yet another version = jQuery v1.12.4.

Is it normal for a Payment Gateway to load its own version of jQuery on page load? A similar service called Laybuy doesn't - or at least Google isn't highlighting it.

And finally, does anyone know if Shopify loads jquery-ui for the front-end? When I search the theme for 'jquery-ui.min' nothing comes up. Looking at theme.liquid, it seems to be coming from something called:

{{ content_for_header }}

But I can't figure out where that loads from, or if you can control what it pulls in. I'm hoping at least one of these is app-related so can be removed if the app isn't installed.

Any suggestions would be much appreciated.

Cheers

Ben

[oreoorbitz]

The jquery in vendor.js is probably the jquery that comes with your theme.

The jquery in snippets/special-offers.liquid is probably installed by an app.

Apps really shouldn't rely on jquery, but many do, especially the older ones, and since they can't guarantee a theme will have Jquery, they load it themselves to make sure.

Sometimes you can message them and they'll disable loading jquery and the app will rely on the jquery in your theme. Sometimes they'll respond "lol i dunno"

Shopify doesn't load jquery-ui by default, its probably being loaded by the app that's loading jquery, that makes the most sense, since I an app wouldn't load jquery-ui without being sure it's loading jquery.

[Ben31]

Thank you for the lay of the land, will dig into this later today.

If there's no call to load the jQuery-ui library when searching every file in the theme, do you know where else I might find it?

e.g. Are there dynamic calls to libraries that maybe don't show up in theme files somehow? Is there a way to see/control what is loading from {{ content_for_header }}

Cheers, much appreciated.

[oreoorbitz]

Content_for_header has a bunch of stuff, mainly things loaded by apps, and then a bunch of standard shopify stuff.

So jquery-ui is probably being loaded in there.

A thing I usually do is write a comment bellow and above content_for_header and then go to the element inspector in my browser's developer tools and see what is being loaded in there.

so something like

<!---  content for header starts here --->

content_for_header

<!-- content for header ends here --->

The only way to control something being loaded through content_for_header is to use the capture and remove/replace technique.
https://community.shopify.com/c/Shopify-Discussion/Benefits-of-content-for-header/m-p/863692#M192756

[oreoorbitz]

Oops double post, uh how do I delete this.