We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to optimize Shopify apps (ScriptTag API). Code + demo

How to optimize Shopify apps (ScriptTag API). Code + demo

Mircea_Piturca
Shopify Partner
1548 44 349

Hey,

I've bumped my head many times trying to optimize stores with many apps. Finally, I've written some code that allows optimizing these types of apps.

 

Quick demo:

Optimized producthttps://go-crazy-superstar.myshopify.com/products/olive-garden (291Kb JS initial load)

Unoptimized producthttps://go-crazy-superstar.myshopify.com/products/olive-garden-unoptimized (679Kb JS initial load)

 

On both pages, there are 5 apps loaded via ScriptTag API. On the optimized page, the apps are loaded only on user interaction (user page scroll and interaction).  

This little "trick" bumps Lighthouse points from ~48 to ~69 (will vary based on the device you test on).

 

The code is available at https://github.com/mirceapiturca/Sections/tree/master/App%20Optimization

You can read more technical details and how to set up the section on my blog: https://sections.design/blogs/shopify/app-optimization

 

Happy optimization!

Finally—Add variant descriptions to your products
Replies 0 (0)