Optimization of JS files that load on home page

DeltaAJM
Tourist
7 0 1

On the home page of my website they load a lot of unnecessary JS files. I would like to know from Shopify how I can optimize them so that they only load the necessary ones.

This is link of my site: https://udq13keoddf6x91o-24812502.shopifypreview.com/

Thanks for your support 🙂 

Replies 6 (6)

JoesIdeas
Shopify Expert
2195 201 587

You can conditionally load scripts where they're needed using liquid, for example:

{% if template == "index" %}
Anything you put here will only load on the home page
{% endif %}

 

It's common to have scripts and app code loading in theme.liquid, which then loads files on every page in your site. But if you only need the code to run on 1 template (home, product, etc), then you can conditionally load it like that.

If you're not familiar with Liquid, here's documentation to help you out: https://shopify.github.io/liquid/

 

• Creator of Order Automator (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Deal with Fraud / Chargebacks
DeltaAJM
Tourist
7 0 1

Hi @JoesIdeas . Thank you very much for your answer.

For example, I have this list of scripts (attached image), according to this, if I want its load to be optimized with the code that you sent me, how would it look?

Could you give me an example please?

And finally, according to what I understand, this would go in the theme.liquid file of my page, correct.

I appreciate a lot your help 🙂

asd.JPG

oreoorbitz
Shopify Partner
242 29 129

You should be careful with trying optmize JS usage if you are not comfortable with coding, its one of the more complex optimzations.

For instance, it's important to understand the distinctions between javascript script tags loaded in theme.liquid, and javascript loaded in content_for_header, if you want to conditionally load scripts in content_for_header, you have to capture content_for_header and then use replace to remove the specific scripts on the specific pages you want them not to load on.

Its also very important to understand that when PageSpeed Insight points out unused javascript, the tool isn't refering to the entire file, but functions within those files, so if you remove a file from being loaded on a specific page without manually checking if that file is being used, you could cause errors.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
JoesIdeas
Shopify Expert
2195 201 587

@DeltaAJM I wouldn't be able to say, it's different with every site. The idea is to find what you can conditionally load, test it, then if all good publish it (always work on a back up theme).

The best place to start is in your theme.liquid file. If you see scripts or include / render statements for apps that only get used on certain pages, that's the best case for conditionally loading them (by default a lot of apps will put their snippet in theme.liquid, loading it on every page, rather than the pages it's needed).

What you have in your screenshot is the output of the site, some of that stuff you might not be able to (or want to) conditionally load or defer load. @oreoorbitz makes a good point about being careful, definitely work on a backup theme if you're handling this yourself. Then you can test the backup theme first before pushing live. Also keep in mind Google PSI isn't a good tool for ecommerce sites, you'll get a lot of warnings and recommendations that by doing them can decrease your conversions (for example, they'll recommend you to remove scripts, etc, but those same scripts help you with your email marketing, chat windows, engaging features, etc.)

I recommend conditionally loading / defer loading what you can safely, but don't get to the point of removing things just to appease an arbitrary score.

• Creator of Order Automator (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Deal with Fraud / Chargebacks
philsav
Shopify Partner
1 0 0

Is there a way to load a script on page depending if the section/block is being used on that page

Swishman
Shopify Partner
20 0 2

Hello, there are a lot of apps in Shopify-appstore that might be a solution. If optimising by coding js seem too big a mountain to climb ie. 

 

Do check out Swish page speed booster , which can help with JS files and loading of these resources across all pages.

Shopify Speed Booster Application