FROM CACHE - en_header

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)
achieveapplabs
Shopify Partner
512 39 86

@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

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
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? 

achieveapplabs
Shopify Partner
512 39 86

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.

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
Tenerifekiwi
New Member
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