Hitting 60 FPS: How to Discover and Fix Performance Issues in React Applications
Submitted by Ankur Sethi (@s3thi) on Friday, 29 June 2018
Technical level: Intermediate
In this hands-on session, I will dive deep into the Chrome Developer Tools and walk you through discovering and fixing common performance issues that affect React applications.
I will begin by using the Chrome Developer Tools to profile an existing application that is known to have terrible performance. Then, I’ll interpret the profiling data, pinpoint the performance issues, fix them, and profile the application again to verify that the changes I made actually had an effect. At the end of the session, I’ll be left with an application that loads fast and runs fast.
In the course of the session, you will learn how to understand and interpret the immense amount of data produced by the Chrome profiler.
If you don’t consider the performance cost of new features before adding them to your React applications, you will find that your apps get slower over time and begin to drive away users. An app that is blazing fast today might bring even a high-end computer to its knees tomorrow, infuriating users and causing revenues to slip.
In this hands-on session, I will walk you through discovering and fixing common performance issues that affect React applications. All the issues I will talk about are based on real-world situations I’ve seen on my clients’ websites (including Quintype, Insider, and Pratham Books).
- I will begin by using the Chrome Developer Tools to profile an application that is known to have terrible performance.
- I’ll interpret the profiling data, make educated guesses about the causes of slowness or jank, and test out my theories by making changes to the application.
- Once I’m sure of the root cause of a particular issue, I’ll proceed to fix it. I’ll then profile the application again to verify that I’ve actually fixed the problem.
- At the end of the session I’ll be left with an application that loads fast and runs fast.
This will not be a tutorial on using the profiling tools built into Chrome, but an exercise in interpreting the results produced by them in order to arrive at actionable changes we can make to our codebase so we can improve performance.
We will combine Chrome’s profiling data with our knowlege about our own code, browser behaviors, and best practices to guess at the causes of jank, and use the scientific method of experimentation and measurement to arrive at fixes.