Increase App Loading Speeds

Highlighted
New Member
1 0 0

Hi I am on a dev team trying to increase the speed at which our embedded app loads on a product page. Currently, the product page loads and then ~1600ms later our app is rendered to the screen. We are doing everything on our end to decrease the size of our application so that when it is time for it to be loaded, it loads as fast as possible. The point of this post is to ask: are there ways to ensure an embedded app loads earlier/as early as possible?

 

Can anyone explain:

1) How apps are loaded and rendered on Shopify stores? If there are multiple apps, how is the loading order of the different apps determined? 

2) Any optimizations for when an app is loaded?

 

Thanks in advance!

-Ryan

0 Likes
Highlighted

Hi,

 

From just a quick inspect element of a shopify store, we can grab a lot of information. 

1) How apps are loaded and rendered on Shopify stores? If there are multiple apps, how is the loading order of the different apps determined? 

First, when an app is added to a store via the ScriptTag, it is added to the store in the header with an async attribute. This means that your code starts to download asynchronously from the moment the DOM is fetched. Your script will run independently of all other scripts, so it isn't blocked by any other script. However, in your javascript code, if it waits for other elements to load first, it maybe blocked via javascript.

 

2) Any optimizations for when an app is loaded?

There are many things you can do for optimization of your app depending on your architecture. Here's a few points:

  • Serve your javascript via a CDN
  • GZIP your javascript
  • Minimize and compress your javascript
  • Make sure javascript is cached
  • Make sure your javascript is truly asynchronous so that it's not waiting for the DOM to load
  • Make sure any calls/queries to external or internal APIs are optimized - combine them or run them asynchronously
  • There are plenty of articles on how to optimize JS code performance:
    ie. https://www.linkedin.com/pulse/25-techniques-javascript-performance-optimization-steven-de-salas/

 

Generally you will have do some combination/variation of the above. Let me know if you have other questions.

 

Please like the answer or mark as solution if this is what you are looking for.

 

Cheers,

ui-gab

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
0 Likes