Improving Shopify App’s Performance
Article Summary
Shopify's mobile app was getting slower after migrating to React Native. So they spent a year making it blazingly fast again.
The Shopify engineering team noticed performance degrading in their merchant-facing mobile app throughout 2023. They set ambitious goals: screen loads under 500ms (P75) and app launch within 2 seconds. Here's how they achieved it.
Key Takeaways
- App launch improved 44% faster, screen loads reduced by 59% (P75)
- Built LazyScrollView using FlashList to cut load times by 50%
- Enabled inlineRequires in Metro config for 17% faster launch time
- Custom state batching improved screen loads 15-30% on average
- Pre-warming cache increased cache hits to 90% for critical screens
Through systematic optimization of rendering, caching, and unnecessary work elimination, Shopify cut app launch time by 44% and screen loads by 59%.
About This Article
Shopify's mobile app was loading too much content off-screen right from the start. Screen loads hit 1400ms at the P75 mark, and the app itself took about 4 seconds to launch. This wasted device resources unnecessarily.
The team made two key changes. They optimized the Restyle library to cut down on object creation overhead. They also froze background components so they wouldn't update needlessly when navigating between screens. The result was Restyle overhead dropping below 2%.
Freezing background components cut navigation time by up to 70% on some screens. The Restyle optimization also made component rendering more efficient across thousands of components in the app.
