Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

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.

Replies 4 (4)

Not applicable

@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

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? 

Not applicable

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.

Tenerifekiwi
Visitor
1 0 0

Hi,

Can this also be done to improve the loading of paid for Apps or will trying to host them on shopify break them in some way.

 

Cheers,   Phil