Overview
The article discusses the performance improvements made to the Shopify mobile app, which serves millions of merchants daily. It outlines the strategies employed to enhance app speed and efficiency, particularly after migrating to React Native, achieving significant reductions in load times and app launch speed.
What You'll Learn
1
How to set performance goals for mobile applications
2
Why optimizing rendering timing is crucial for app performance
3
How to leverage caching effectively in mobile apps
Prerequisites & Requirements
- Understanding of mobile app performance metrics
- Familiarity with React Native and performance monitoring tools(optional)
Key Questions Answered
What performance goals did Shopify set for its mobile app?
Shopify aimed for critical screens to load under 500ms (P75) and for the app to launch within 2s (P75). This was a significant improvement from the previous P75 screen load time of 1400ms and app launch time of approximately 4s.
How did Shopify reduce screen load times by 59%?
Shopify implemented strategies such as LazyScrollView to minimize unnecessary rendering and optimized the home screen load time by not waiting for all queries to finish. These changes collectively contributed to a 59% reduction in screen load times.
What was the impact of enabling inlineRequires in the metro.config.js?
Enabling inlineRequires improved the app's launch time by 17%. This change allowed for reduced upfront code execution, which was previously overlooked since the introduction of Hermes.
How did Shopify improve cache hit rates?
By tracking cache misses versus hits, Shopify discovered that only 50% of users were loading from cache first. After resolving issues with their GraphQL cache, they increased cache hits by 20%, leading to a better user experience.
Key Statistics & Figures
App launch time improvement (P75)
44%
The app's launch time was reduced by 44% as a result of various optimizations.
Screen load time reduction (P75)
59%
The screen load times were reduced by 59%, significantly enhancing user experience.
Cache hit rate increase
20%
After resolving issues with their GraphQL cache, Shopify increased cache hits by 20%.
Navigation time reduction
70%
Freezing background components reduced navigation time by up to 70% for some screens.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
React Native
Used for building the Shopify mobile app.
Frontend
Flashlist
A component used to optimize rendering by only displaying visible items.
Backend
Graphql
Used for data fetching in the app.
Key Actionable Insights
1Implement LazyScrollView to optimize rendering in your app.This component only renders visible items during the initial render, significantly reducing load times. It is especially useful for long screens with content that extends beyond the viewport.
2Track cache hits and misses to understand your app's performance.By analyzing cache usage, you can identify areas for improvement and ensure that users receive relevant data quickly, enhancing their experience.
3Optimize your app's launch time by enabling inlineRequires.This simple configuration change can lead to substantial performance gains, as it reduces unnecessary upfront code execution during app startup.
4Profile native module startup times to identify performance bottlenecks.Understanding which native modules slow down your app can help you make targeted optimizations, improving overall launch speed.
Common Pitfalls
1
Excessive rendering during initial render can lead to slow app performance.
Rendering too many components at once can delay the display of critical content. To avoid this, prioritize rendering only what is visible initially and defer the rest.
2
Not leveraging cache effectively can degrade user experience.
Failing to utilize cached data means users may see outdated information or experience longer load times. Implementing strategies to increase cache hits can significantly enhance performance.
Related Concepts
Mobile App Performance Optimization
Caching Strategies In Mobile Applications
React Native Best Practices