How can I stop app JavaScripts from loading on specific pages?

Technical Q&A
1

Hey guys,

A newbie question here. I am working on a store and would like to drive traffic to my landing page which should be as clean and fast as possible. So I built one with Shogun. the problem that pagespeed insights gives me a mobile score of only 38. Biggest problems seems to be loading of Javascripts for apps that I don’t even have enabled on landing page! For example Tdio live chat, I have it disabled for my landing page, yet javascript for it is loading and slowing down my page.

Is there a way to not load my app javascripts on my landing page?

2

If the JS is being automatically inserted by Shopify’s Script Tag API, you can do something like this in your theme.liquid:

{% if page.handle = 'my-landing-page' %}
  {{ content_for_header | remove: ', "https:\/\/script-url.com\/path\/to\/file.js"' }}
{% else %}
  {{ content_for_header }}
{% endif %}

You’ll have to look at the source code of the page and fine the exact output of the app’s JS file in the ‘asyncLoad’ function. The example code above will remove it from being loaded on that landing page.

3

Hey Gina,

Thanks so much for your help! I think this is something what I need. I found apps that are blocking me so badly, edited your code with links and pasted just under in theme.liquid

Now my code looks like this:

{% if page.handle contains 'sale' or 'promo' %}
  {{ content_for_header | remove: ', "https:\/\/obscure-escarpment-2240.herokuapp.com\/js\/best_custom_product_options.js?shop=myshopURL.myshopify.com","https:\/\/assets.cloudlift.app\/api\/assets\/upload.js?shop=myshopURL.myshopify.com"' }}
{% else %}
  {{ content_for_header }}
{% endif %}

Is this right? because it doesn’t seem to be doing anything really, my pagespeed insights still show tehse JSs as big blockers.. :disappointed_face:

Maybe I should paste the code somewhere else?

4

Ok,

So I realized that Shogun has its’ own theme.shogun.landing.liquid which I just need to clean and somehow make it not load certain apps.

If I find any codes in Heading I just remove it and it works perfectly, my LP doesn’t load HotJar and stuff like that. But for some apps I just can’t seem to find code in heading and your code snippet doesn’t seem to work :disappointed_face:

5

Ok, so My PageSpeed Insights went from 37 all they way up to 72. So a bit more optimizing left to do but this is actually great!

I removed all the scripts that I don’t need in head and also changed

{{ content_for_header }}

to this

{% if page.handle = ‘sale’ %}
{{ content_for_header | remove: ‘, “https://assets.cloudlift.app/api/assets/upload.js?shop=MYSTOREURL.myshopify.com”’ }}
{% else %}
{{ content_for_header }}
{% endif %}

Now pagespeed is good, but I have an error at the top

liquid error: Unknown operator =

hwo could i fix that? :grinning_face_with_smiling_eyes:

6

Change this:

{% if page.handle = 'sale' %}

To this:

{% if page.handle == 'sale' %}
7

You can’t remove JS files if they aren’t get called from your Shopify theme code. You can check before the end of head tag or body tag

{% unless page.handle contains 'sale' or page.handle contains 'promo' %}

{% endunless %}