Shopify ScriptTag is slow. How can I load my JS faster?

FootsieNG
Tourist
7 1 1

I've build an embedded app that injects javascript into the product page of a client site. The code generates an icon against each product listing, but it is slow to load, and appears 1-2 seconds after the page has loaded.

Is there a way to optimise the load speed through scriptTag api? or an alternative method to achieve the above?

Thanks in advance.

0 Likes
achieveapplabs
Shopify Partner
472 36 74

@FootsieNG ,

 

Don't make an external call simple. Upload your scripts to the Shop theme asset folder and include it in theme.liquid. Remember Shopify is server rendered HTML. So if you can get it in the templates there won't be much delay.

Do a PUT to the theme asset folder with your script. Add two scripts a small one that bootstraps the bigger one. Then update theme.liquid to include your init script. Finally in your init script append to the head the main script at the end of body load, something like that. 

 

Best,

Sam

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
0 Likes
FootsieNG
Tourist
7 1 1

Thanks for the reply Sam. Got it - What is the purpose of bootstrapping the main script from the init script? 

0 Likes
achieveapplabs
Shopify Partner
472 36 74

Init script allows the larger script to load after the HTML body has been parsed. Non-blocking, best practice. RequireJS with BackboneJS works the same way.

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com