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

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 product: https://go-crazy-superstar.myshopify.com/products/olive-garden (291Kb JS initial load)

Unoptimized product: https://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!

2 Likes