How can I minimize unused JavaScript to increase page speed?

[Sensei_Ryan]

I'm trying to increase page speed score and trying to reduce unused javascript.

How would I go about actually reducing/removing unused javascript?

Website: follownoonstore.com

[made4Uo]

Hi @Sensei_Ryan 

Sometimes APPs or external library run the functions even it is not needed. If you really need the APP or library, there is no way around it. 

[kazi]

Hello @Sensei_Ryan 

                                         To reduce unused javascript  remove unwated apps or optimize app loading add conditional loading where they needed: EX your reviews might not be needed in home in this case you can add a condition  like this  

{% if template contains 'product' %}

{% render 'review-app'  %}

{% endif %}

So the review app will load in products pages only and will not in home or others pages.

If you are not familiar not familiar with this you can hire any shopify developer.

[speedboostr]

To reduce your unused Javascript simply means to only load what will be used on the page.

The problem is that Shopify has 2 ways to add javascript from third-parties.

1. Added via editing your theme code and adding a <script> tag yourself (or allow access so the app developer can do so)

2. Installing an App to your store. Which will then mean it will be loaded on every page via Shopify's Trekkie system, these scripts are accessible via the content_for_header liquid variable, that is found in the theme.liquid layout.

For scripts added in the first way, you can use a conditional load via checking the liquid variable 'template' as follows (for example on only the home page) 

{% if template == 'index' %}

   <script src="my-third-party-app.com"></script>

{% endif %}

 
You can also check for 'product, search, cart and collections plus a bunch of others - the full list is here: https://shopify.dev/api/liquid/objects#template

For scripts added via installing as an app, you can modify the content_for_header variable and write a custom load handler to iterate the script tags - this is not recommended officially by Shopify to do but can be done to garner a speed increase. Conditional loading and CSS can also be utilised for aiding performance with this.

This task is far more technical and requires advanced knowledge of liquid and Javascript, it's also dependent to what Apps are being loaded as not all apps support this form of optimization.

As a one-size-fits-all for non-technical users you can use the instantpage snippet to get a slight boost (add before the </body> on your theme.liquid)

<script src="//instant.page/5.1.1" type="module" integrity="sha384-MWfCL6g1OTGsbSwfuMHc8+8J2u71/LA8dzlIN3ycajckxuZZmF+DNjdm7O6H3PSq"></script>

For a tailored loader that works specifically with your App and script configuration, contact us and we'll optimize your store and implement a solution for you

[Cedcommerce]

Hello @Sensei_Ryan,

That’s a great way to increase your page speed score. We will definitely help you with this. 

For reducing the unused javascript, you need to follow these instructions:-

Remove unused apps along with the code

Use scripts under the condition of the theme.liquid file. 

For example:- if a script is needed to load on the home page only then you need to set a condition like this

{% if template == "index" %}

//script goes here

<script src="{{ script link}}" ></script>

{% endif %}

for including script on product page then use this code:-

{% if template == "product" %}

//script goes here

<script src="{{ script link}}" ></script>

{% endif %}

for including script on collection page then use this code:-

{% if template == "collection" %}

//script goes here

<script src="{{ script link}}" ></script>

{% endif %}

Let us know if it works, or if you need more help with this. 

All the best, 

CedCommerce

[Marc_Mayr]

If you'd like to remove unused javascript loaded by 3rd party apps, we created an app for it:

https://apps.shopify.com/pagespeed-javascript?locale=de

It helps you to block unused javascript from pages where the app is not required.

[shopbratsbargai]

the app you suggested completely removed all js, i had to revert back to a previous code because it removed more than what was needed

[frankymartin]

Hi @Marc_Mayr @Marc_Mayr 

What about the comment of @shopbratsbargai  ?