Users expect apps to be responsive and fast to load. An app with a slow start time doesn’t meet this expectation, and can be disappointing to users. This sort of poor experience may cause a user to rate your app poorly or even abandon your app altogether.
Google's recommendation is to have your app startup in less than 5 seconds.
There's not a lot of studies done to measure the impact of improving startup time in the context of a mobile app. In this study, the author shows that improving startup time by 53% improved the ratings of the app, and improved conversion rate by 2.2%.
We could hypothesize that the situation is similar to the web. For instance, Amazon found that every 100ms of latency cost them 1% in sales.
One way to measure time lapses locally and in production is with Firebase Performance.
To have a neat graph like the one above on your project, you should:
1. Install Firebase Performance with react-native-firebase
The most important step you need to take is moving to Hermes. Here's a glimpse of the difference it can make on lower end Android devices (here on a Wiko Fever 4G):
3.9s to load with Hermes vs 12.9s without Hermes. 🚀
This article by the FB team explains well why the impact is so massive, especially with the GIF below:
How to INSTALL it
Enabling Hermes is simple and can be done following those two steps
However it can come with a bit of gotchas to double-check:
1. Proxy support is included in React Native 0.64 and above. It is used in dependencies such as immer, or @react-native-firebase/database
2. Intl support will be included in React Native 0.65 and above. It is used in dependencies such as lingui (for pluralization), date-fns-tz
4. If you're using crash reporting (Sentry for instance) with custom build types (for AppCenter deployment for instance), there's an issue with crash reporting source maps on app center builds that can be fixed with this PR
5. CodePush users: Hermes add a step when deploying with codepush: 1st Step: Bundle JS > 2nd Step (new): Convert to Hermes Bytcode , only the new version from appcenter-cli supports this. Make sure to test a deployment with Codepush. Source
6. If your project has a different folder structure than the React Native default structure, you need to override hermesCommand in your app.build.gradle config as it is done here
Once all this is done, make sure to test the performance gains on a release build! In our experience, Hermes was actually slower in debug mode, but much faster in release builds.
We migrated 4 apps to hermes. on average, startup time improved by 53%
Other improvements to consider
Simplify your splashscreen
If you're using react-native-splash-screen, and you have a complex layout in your splashscreen, this could also be a cause. Experiment to check the difference between when the splashscreen is shown and when it's not.
For instance, our app had a complex Lottie animation in the splashscreen which was adding ~1.5s just to load the animation on the start up time.
Move some initial logic to the native side
ENJOY YOUR RESULTS
Try it out for yourselves, move to Hermes and share your success stories! 🤩
How much startup time have you gained? 🚀