How can I minimize unused JavaScript to increase page speed?

Sensei_Ryan
Shopify Partner
30 0 15

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

 

Website: follownoonstore.com

Replies 7 (7)

made4Uo
Shopify Partner
3821 716 1151

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

kazi
Shopify Partner
569 87 109

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.

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

speedboostr
Trailblazer
136 20 26

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

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).

Cedcommerce
Shopify Expert
718 76 112

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
Marc_Mayr
Shopify Partner
71 1 11

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
Tourist
5 0 2

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
Shopify Partner
30 0 17

Hi @Marc_Mayr @Marc_Mayr 

 

What about the comment of @shopbratsbargai  ?