React Native performance optimization

This article does not go into the details of specific performance tuning practices. It is a series of methods that we need to adopt for ourselves, depending on the situation.

The original link: blog.usejournal.com/getting-sta…

For the past year, I have been continuously optimizing the performance of a large banking APP. So far, we have successfully reduced TTI from 14 seconds to around 2.5 seconds on a poor Huawei P20 Lite. Here are some lessons learned from these performance optimizations.

Identify the problem

A common mistake during performance tuning is to try to solve all performance problems at once. Instead, find a low-performing Android machine, install your APP, perform a complete set of business operations, and see how your APP performs on low-end Android devices. Ask yourself, what are the most common features that users use in your APP? What are the operational paths that are core to the user experience?

  • Try removing all animations — how does your APP work?

  • Remove the network request and render your page – is your APP still slow?

  • Try removing a component – does page rendering time improve significantly?

Find out all the logic associated with page rendering, when a network request is executed, and when some new component is rendered. Only when you find the key element that is causing your APP’s performance problems can you possibly fix it.

1. Performance testing, performance testing, performance testing

Tell me the important thing three times.

Every time you do a performance optimization, you need to measure the impact of some of your changes. How do you measure it? Use a stopwatch, use a React-native Debugger, or some other third-party tool? There is no silver bullet in React Native performance testing, and everyone’s problems can vary greatly, so it’s important to test solid performance data before and after you make changes to optimize performance.

I wrote another long article about performance testing earlier, but if you’re interested, you can go to 🎉.

Visualize your Bundle size composition

The React-Native Bundle-Visualizer is a powerful tool for analyzing the size of your bundles. As you can see from the package name, the tool performs react Native code packaging, visualizes the size of the final bundle, and allows you to see which parts of the bundle size come from, whether it’s our page logic or node_modules. You can see if there are any files or NPM packages that occupy a particularly large file size. Do you really need moment.js, hopefully it won’t take up 6% of your bundle’s size…

3. Load code/resources only when you need them

Load the code only when it needs to be used

This is one of the most effective ways to shorten your APP’s first startup time. In the React Native project, the code loaded lazily was more complex than it should have been, but it was definitely worth it. With code lazy loading, one of our projects reduced the APP’s startup time from 14 seconds to 4 seconds even on the slowest Android machine we could find!

The React Native official Performance Tuning section is one of the best resources for this.

Lazy loading of non-critical data

You’ve probably seen this technique in a lot of apps, usually during the initial stage of the page, the request to render the data that the first screen depends on, after the first screen is displayed, the rest of the page data is loaded. This video explains this technique in detail.

4. Optimize and standardize image resources

In react Native projects, you can get significant performance gains by optimizing static resources (usually images) at a fraction of the cost.

Why is that? Each designer may pose differently around PNG images, and when you work with multiple designers, they may have different Settings for exporting PNG images.

You can use software like ImageOptim to optimize the size of your images and even automate the entire process, as this article does.

5. Take advantage of perception

Performance optimization is not just about shortening the code execution time. Our ultimate goal is to make users feel smooth when using the APP. Perceptual performance optimization is a trick you can use to make your APP feel fast and smooth. There are ways to optimize user awareness, such as holding the user in the welcome screen until the JavaScript code loads, or using the React-native shimmer.

6. Use open source components whenever possible and keep them up to date

In the course of my work, I realized that it is almost impossible for us as APP developers to write better code than open source components. The thousands of open source contributors, the complete testing facilities they have, and the level of knowledge of open source authors, for the most part, far exceeds that of any member of our company or group.

Over the past two years, the React Native community has focused on performance optimizations, particularly with the core team’s recent major upgrades, the JSC upgrade at version 0.59 and the Hermes release at version 0.60.2.

7. Rewrite your animations

Animation stuttering is usually more likely to make users aware of performance problems in an APP. Executing animations in JS threads can easily cause performance problems, resulting in animation stuttering. Instead, you can avoid this problem by handing the animation to the native thread to run. Most animations can be Animated and set to useNativeDriver: True.

8. Avoid optimizing details too early

The author wants us to grasp the main contradiction of the problem and solve 80% of the 80/20 principle first.

Small points are usually not the main cause of APP performance problems.

9. Performance optimization: Pain and happiness

APP performance tuning requires a lot of ongoing effort, which is different from the APP architecture — however, the process of performance tuning also gave us the opportunity to better understand the internal mechanics of React.

Hope you enjoyed this article 🎉.

Recommended reading

I highly recommend this video on React Native performance optimization. It is very practical and easy to practice according to our actual situation. The React Native team’s React Native performance optimizations are well worth learning.