Solved

Reduce unused Javascript on Shopify

Inka
Visitor
1 0 0

Hi everybody,
We have some apps installed and they all load some javascript, even if it is not necessary on all pages (for example Homepage doesn't need the upsell Javascript)
So my core web vitals say, to remove unused Javascript. Is there some way to load apps only on specific pages?

Accepted Solution (1)

Marc_Mayr
Shopify Partner
71 1 10

This is an accepted solution.

Hi @Inka ,

Shopify by default doesn't provide a way to load apps only on specific pages. You can try a filter on your {{ content_for_header }} to filter the Javascript out, but as the versions on javascript files often change, this can be time consuming and you'd need some robot to regularly check for changes.

That's why we developed an app to reduce unused Javascript loaded by 3rd party apps that will improve your Core Web Vitals of your Shopify store.

You can have a look at the app here: https://apps.shopify.com/pagespeed-javascript

 

Screenshot at Aug 25 10-57-43.png

View solution in original post

Replies 4 (4)

Marc_Mayr
Shopify Partner
71 1 10

This is an accepted solution.

Hi @Inka ,

Shopify by default doesn't provide a way to load apps only on specific pages. You can try a filter on your {{ content_for_header }} to filter the Javascript out, but as the versions on javascript files often change, this can be time consuming and you'd need some robot to regularly check for changes.

That's why we developed an app to reduce unused Javascript loaded by 3rd party apps that will improve your Core Web Vitals of your Shopify store.

You can have a look at the app here: https://apps.shopify.com/pagespeed-javascript

 

Screenshot at Aug 25 10-57-43.png

Epsryn
Shopify Partner
9 0 5

I would be very skeptical about this, as most of these apps add tricks to fool pagespeed insights without actually improving your real user experience

Andrei_Kuchuk
Shopify Partner
44 5 14

Hi @Inka !
It is the worse part of Shopify apps!
Unfortunately Shopify provide single way to add scripts on your site and it works for all pages.
(Scripts tags api: https://shopify.dev/api/admin-rest/2021-10/resources/scripttag)

And all of this scripts used for all pages with shopify object:

{{ content_for_header }}


In general we can use replace filter for this block as we can use with simple text

{% if template = 'index' %}
{{ content_for_header | replace '<script src=app-script.js><script>', '' }}
{% endif %}


This solution is work but it is very unstable and can't support app changes so it is hack.
There is only one solution I know

Andrei Kuchuk, Lead Shopify developer at SpiralScout

Cooperation email: andrey.kuhcuk@spiralscout.com
BeyondUs
Tourist
5 0 1

unused javascript.png

 

this is i get when i replace 

{{ content_for_header }} 

to

{% if template = 'index' %}
{{ content_for_header | replace '<script src=app-script.js><script>', '' }}
{% endif %}