Good performance is crucial for any app or product. An app is considered to have bad performance if it responds slowly, shows slow animations, freezes, crashes, or uses a considerable amount of battery. These indicators have a direct impact on increasing/decreasing the app engagement of users.
While working with React Native, we faced some of the above problems, eventhough we were following best coding practices. Hence, we decided to instrument our app to identify where it isn’t experiencing the best performance, based on – network, memory, graphics, or CPU to deliver a flawless experience to end-users.
5 Tools to Perform Profiling of React Native
At Yubi we used the following tools:
1. Apk Analyser
APK Analyzer provided the following insights into the composition of our APK or Android App Bundle(Aab):
- APK size optimisation: It can show the raw file size (the unzipped size on disk) and the download size (the estimated compressed size). The list of files and folders is sorted by total size in descending order.
- Understanding the composition of theDEX files: When we click on a DEX file, we see the summary of how many classes and methods it defines, and how many total references it contains.
- Comparing APK files: It was used to show the difference between two different APK files.
Actions taken from the above insight:
- Removing unused pngs;
- Converting high sized pngs to svgs (vector images);
- Optimised font files;
- Changing inline functions to named function.
2. Android Studio Profiler
The Android Profiler tool provides real-time data to help us tunderstand how our app uses CPU, memory, network, and battery resources.
A couple of screens in our app took a long time to load fully (become interactive) for the user. There could have been multiple reasons for the same such as an API response time, calculation involved in rendering the UI, frame change rate etc.
Hence, we decided to use network profiler to figure out the real culprit. With the Network profiler, we were able to calculate the exact response time of each API used in the app and optimize accordingly
We were also getting a notifications from the android operating system which said that our application was draining the battery faster than expected. To dive deep into the same, we used the memory profiler of Android Studio. The Energy Profiler monitored use of the CPU, and it displayed how much energy is utilised in different modules of the applications. With the help of it, we were able to identify which user flow we were consuming, creating a big heap of intermittent data resulting in high energy consumption.
For detailed analysis and usage about each of the profilers, please refer the following links:
- Profile network traffic with Network Profiler
- Profile energy usage with Energy Profiler
- Network Analysis Report
- Memory Report
- Memory Leaks
Actions taken from the above insight:
- Identified all APIs that were taking more than 1 seconds to load;
- Split the critical api into 2 parts;
- Created separate API for UserProfile Image and called only on profile screen.
3. Ios Profiling (xCode Instruments)
Similar to android Studio Profiler, Xcode also provides instruments which support various tools for memory profiling, cpu profiling, time profiling, network profiling, etc.
These profiling tools not only help us identify issues on the app, but also go a long way in detecting and fixing them if done properly. We used the same primarily for network and memory analysis of the ios app.
Memory:
- Images were consuming more memory
- Memory leak trace
4. Instabug
Instabug provides following insights about the React-Native App:
- App Launch: Monitor how long our users wait between when they launch the app and when it becomes responsive. App launch time is critical for users’ first impression.
- Network Performance: Instabug tracks response time and errors ,exactly as seen by users. We can even set up our own thresholds for critical calls;
- UI hangs: It can easily spot if users are encountering UI hangs in any app screen, if the app isn’t responding to the user in a timely manner.
- App Apdex: App apdex is an overall score that reflects the quality of user experience. Apdex score ranges between 0 and 1. The higher the value, the closer we are to satisfying user experience.
Overall Performance
Here’s how is Apdex is calculated.
Network Analysis
5. APM (Application Performance Management)
New Relic APM agent collects crash data, network traffic, and other information for hybrid apps using native components. It empowers the team to make more informed development choices by providing insight into Javascript errors, distributed tracing and network instrumentation.
Conclusion
With the help of such useful insights from the above tools, we were able to improve the performance of our app drastically. First, we were able to reduce the size of our universal apk by 7MB(15%). Second, the initial load time of the landing page was reduced by 1.5 seconds, resulting in great user experience.
Apart from the above tools, there are various other tools available in the industry to perform detailed profiling on the react-native app. We would love to take your suggestions on other tools that our team could explore!
