
3/5/2024
What this post added
This post details the performance improvement journey of the Shopify App, focusing on optimizing critical screens to load under 500ms (P75) and app launch within 2s (P75). Key technical contributions include: implementing LazyScrollView powered by FlashList to render only visible content, optimizing the Home screen by not waiting for all queries, switching horizontal lists to FlashList, rewriting screens as lists using ListSource for optimized rendering and updates, enabling inlineRequires in metro.config.js for a 17% launch time improvement, optimizing native module initialization, freezing background components to reduce navigation time by up to 70%, enhancing the Restyle library for a 5-10% performance boost, implementing custom code for batched state updates improving screen load time by 15-30%, tracking and improving cache hits by resolving GraphQL cache issues, and pre-warming the cache for critical screens to achieve 90% cache-first loads.