Improving Shopify App’s Performance

Summary

Shopify’s mobile app saw performance decline during its React Native migration, prompting a year-long effort to make critical screens load under 500ms at P75 and launch within 2s at P75. The team built real-time dashboards to filter results by device and operating system, then targeted excessive initial rendering, unnecessary background updates, launch overhead, and weak cache utilization. They introduced LazyScrollView and ListSource on FlashList, deferred work outside the viewport, enabled inlineRequires, optimized a native module, batched state updates, froze background components, and improved Restyle. They also fixed a graph QL cache issue and pre-warmed critical screen data, increasing cache-first delivery to as much as 90% for key screens. By year-end, app launch P75 was 44% faster and screen-load P75 times were reduced by 59%, with performance treated as an ongoing process requiring monitoring and repeated optimization.

Context

At the beginning of 2023, performance had declined since the app began migrating to React Native. The stated targets were critical-screen loads below 500ms at P75 and app launch within 2s at P75, compared with 1400ms and approximately 4s respectively at the time.

Approach / What changed

The team used real-time, filterable performance dashboards and addressed work scheduled at the wrong time, unnecessary work, and underused caching. Changes included FlashList-based LazyScrollView and ListSource components, deferred rendering, launch and native-module optimization, background-component freezing, Restyle improvements, batched state updates, GraphQL cache tracking and repair, and cache pre-warming for critical screens.

Takeaways

• LazyScrollView, powered internally by FlashList, rendered only visible content during initial render and reduced some screen load times by as much as 50%.
• Enabling inlineRequires improved launch time by 17%, while custom state batching improved screen load time by 15% on average and up to 30% for some screens.
• Fixing a graph QL cache issue increased cache hits by 20%; pre-warming critical screens led to as many as 90% of merchants seeing cached data first on key screens.

Related reading