How can I minimize unused JavaScript to increase page speed?

Technical Q&A
1

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

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

Screenshot 2022-09-11 001648.png
Screenshot 2022-09-11 001648.png961×718 21.4 KB

Website: follownoonstore.com

1 Like
2

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.

3

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.

4

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

   

{% 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 on your theme.liquid)

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

5

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

{% endif %}

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

{% if template == “product” %}

//script goes here

{% endif %}

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

{% if template == “collection” %}

//script goes here

{% endif %}

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

All the best,

CedCommerce

6

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.

7

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

8

Hi @Marc_Mayr @Marc_Mayr

What about the comment of @shopbratsbargai ?