Improving Shopify App's Performance
summary
Shopify mobile admin cuts cold-start p75 from ~4s to ~2s and navigation p75 from ~1400ms to ~500ms by fixing three concrete problems. Excessive initial rendering is solved by a custom lazy scroll view (built on FlashList) that renders only what's visible, horizontal lists migrate to FlashList, and screens are frozen when backgrounded to avoid rerenders (up to 70% faster navigations). Global batched setState reduces render events ~4x (~30% faster), caching + preloading doubles cache-hit effectiveness and cuts screen loads 59%.
AI-written summary · about
chapters (12)
- 0:00Introduction and goals
- 1:03Slow load times problem
- 3:35Three performance issues
- 5:22Lazy scroll view solution
- 7:49Horizontal list optimization
- 10:36Unnecessary background updates
- 12:04Restyle library speedup
- 13:29Batching setState calls
- 15:53Caching strategies
- 18:44Performance improvements results
- 19:26Final performance demo
- 20:51Conclusion and resources
related talks
39mDefault to performance
50mOptimizing Performance of Web Apps: Removing Bottlenecks for a Better Experience
26mImproving React Native Performance in Facebook Marketplace
29mClient Says Your Awesome Web App Works Slowly. Now What?
32mPractical Performance Tips Building Progressive Web Apps
39mPerformance Does Matter - Making Your React-Native App Fast
28mEmpowering a Performance Culture
26m9 Performance Secrets Revealed