I’ve worked for a year on optimization of one of the largest mobile apps performance. Here are some things I wish I knew before starting.

0. Find Your Monsters

A common mistake of optimization is focusing on everything all at once. Get your hands on a slow android phone, install your app and do a complete test run and identify your highway functionality — Ask yourself what does your users do most? which paths is performance a crucial part of the experience?

• Try removing all animations — how does your app run?
• Try rendering components with data not being fetched — is it still slow?
• Try removing a component all together — is the rendering time significantly improving?

Figure out the exact way things are rendered, when is data fetched, when is a new component rendered into the tree — Once you know what is causing the slow downs in your app and it will be much easier to fix.

1. Measure, Measure and Measure Again

Every time you do an optimization, test and measure your change — how do you do that? Use a stop watch, use react-native-debugger or whole third other tool — there’s no silver bullet when it comes to react native performance, cases vary a lot so measuring before and after reliably is absolutely crucial.

I’ve written a longer article about this earlier if your interested 🎉

2. Visualize your bundle

react-native-bundle-visualizer is a great tool for investigating your bundle size. I’ve had a lot of ‘aha’-moments using as i finally had the full picture of the app. As the name implies this will build your app-bundle, help you visualize exactly how big your bundle is and how its size spread on different components and node modules. Is there something here that stands out? Do you really need moment taking up 6% of your apps bundle size?

3. Load Only What You Need When You Need It

Dynamically import areas or dependencies as you need them

This is one of the biggest improvements you can do to start up time. It’s one of those things that are a lot more complex than it should be in react native but its definitely worth it. On my old project our startup time went down from 14 to 4 seconds on the slowest android device we could find.

Facebooks own react native post on performance is one of the best resources on this.

Delay anything that isn’t crucial for the user

You can see this effect very much on apps like facebook or instagram, they load the bare minimum, then progressively load more and more. This means data fetching and heavy components, the devices are incredibly fast out there, perceived performance is all about loading the most important stuff first. Here’s a solid guide for it.

4. Optimize and standardize assets

Optimizing assets in your React Native apps provides an easy way to achieve big performance gains with little effort.

Why? PNG’s definitely aren’t created equal, especially if you’re working with multiple designers who use various export settings when creating assets.

You can use software like ImageOptim — or automate the whole process doing something like this.

5. Embrace perceived performance

Performance isn’t only execution time, it’s the feeling of a fast app experience you want in the end. Perceived performance is all the tricks you can do to make it seem like your app is running faster and better. Things like letting your splash screen stay until all your javascript is loaded or using react-native-shimmer to let your user see where the content as its loaded.

6. Utilize as much open source as possible and keep them up to date

One of the bitter sweet things i realised developing at a major IT-company is that we could almost never outperform the big open source projects out there. There are thousands of contributors and their range of devices and knowledge between the developers are often far greater than what your company or team has to offer.

The focus of the React Native community has been on app performance in general the last 2 years, especially the react native core team has made some big steps in 0.59 (New JSC) and 0.60.2 (Hermes introduced!).

7. Rewrite Your Animations

Nothing screams “slow app” like laggy animations to the user. Animations can also be a huge performance hog on the JS-thread, rewriting these to use the native thread instead can make a huge difference. Almost every animation is possible using the limited subset of Animated with useNativeDriver:true set — its all about being clever with the implementation.

8. Avoid Micro Optimizations Until Later

They’re often not the real culprit. Focus on the bigger picture before rewriting things unnecessary inline functions etc.