How can I minimize unused Javascript on specific pages?

[Inka]

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?

[Marc_Mayr · 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

 

[Epsryn]

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]

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

[BeyondUs]

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 %}