Troubleshooting
a slow app
A practical guide
to great React Native performance
Paris - London - New York
Jean-Rémi Beaudoin
@jiherr
We're getting there but...
the app feels slow overall
(because it is)
Let's measure it!
- Find the low hanging fruits
- Beware of time wasters
- Feel the pain of your actual users
What can you measure?
- FPS
- Janky frames
- Load time
- Flame chart
- CPU usage
- ...
Janky frames
-
Pick a key user journey
-
Use an Android test device
-
Plug it in your computer
-
Start the app
-
Run through the journey
adb shell dumpsys gfxinfo com.example
Janky Frames
time
Performance of key user journey
20%
Performance must be part of your team culture
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
Identify bottlenecks
Stop ✋
-
Premature optimization is a waste of time
-
Do not guess which part of the code should be fixed
-
If you have an intuition, measure it!
-
If you don't have a clue, read the ... amazing manual ❤️
https://facebook.github.io/react-native/docs/performance
Find the culprit
With the React Native profiler
UI thread
Native modules thread
JavaScript thread
Available tools
-
React Native profiler
-
why-did-you-update
-
Firebase Performance Monitoring
-
...
why-did-you-update
Spotting issues with flame chart
Spotting issues with flame chart
Upgrade
React Native
Our performance journey
time
Performance of key user journey
38%
19%
15%
Janky Frames
When you stop caring...
Other takeaways
- Use Redux with care (and with Reselect)
- Linters can prevent patterns that impact performance negatively
- Use Twitter ⏩ @nparashuram
Wrap up
- Measure before you act
- Performance optimization is a very attractive rabbit hole
- Always think about the value of your work, life is too short
Thank you! 🙏
Jean-Rémi Beaudoin
Paris - London - New York
Troubleshooting a slow app, a practical guide to great React Native performance
By jrbeaudoin
