📚 Main Topics

1. Introduction to Performance Issues

   • Slow load times for the Shopify mobile admin companion app.
   • Initial p75 app launch time was around 4 seconds, with navigation times of 1,400 milliseconds.

2. Goals for Improvement

   • Target p75 app launch time of 2 seconds.
   • Reduce screen navigation time to around 500 milliseconds.
   • Implement effective dashboards and alert systems for performance tracking.

3. Identified Performance Problems

   • Excessive RenderingNecessary work being done at the wrong time.
   • Unnecessary WorkRepetitive or inefficient code leading to performance degradation.
   • Inefficient CachingNot fully utilizing the caching system.

✨ Key Takeaways

• Lazy RenderingImplementing a "lazy scroll view" to minimize initial rendering time by only rendering visible content.
• Flash ListMigrating horizontal lists to Flash List to optimize rendering and reduce load times.
• Component FreezingFreezing components that are not in focus to prevent unnecessary re-renders, resulting in up to 70% faster navigation.
• Batching State UpdatesGlobally batching setState calls to reduce the number of render events, leading to a 30% increase in load speed.
• Caching StrategiesEnhancing caching mechanisms to improve load times, including preloading data based on user behavior.

🧠 Lessons Learned

• Performance MonitoringRegularly track performance metrics and set up alerts to maintain optimal app performance.
• User EngagementUnderstand user behavior to implement effective caching strategies that enhance the user experience.
• Continuous OptimizationPerformance improvement is an ongoing process; always look for new issues and opportunities for optimization.

🏁 Results

• Achieved a 59% reduction in screen load times and a 44% increase in overall app speed.
• Current p75 app launch time is around 2 seconds, with screen load times close to 500 milliseconds, making the app feel instantaneous.

🏁 Conclusion

The improvements made to the Shopify app demonstrate the importance of addressing overlooked performance issues and implementing strategic optimizations. Continuous monitoring and adaptation are key to maintaining a high-performance application.