Optimization of JS files that load on home page

[DeltaAJM]

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 🙂 

[JoesIdeas]

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/

[DeltaAJM]

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 🙂

[oreoorbitz]

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.

[JoesIdeas]

@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.

[philsav]

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

[Swishman]

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.