Understanding the Performance panel in Chrome DevTools ⏱️
An interactive Chrome DevTools Performance guide covering colors, network requests, flamecharts, metrics and Main Thread bottlenecks.
Joan León has released an interactive guide to the Performance panel that neatly breaks down the entire debugging process.
What the guide covers:
- Color coding: A visual explanation of what the colors represent (scripting, rendering, painting, loading and idle time).
- Request anatomy: How a network request bar is structured, and how to read the two axes of a flamechart (time vs. call depth).
- Self time vs. Total time: The difference between time spent in the function itself and total time including all of its child calls.
- Metrics and phases: The 4 LCP phases, finding layout shifts (CLS), diagnosing INP, the compositing layer and the order in which to look for bottlenecks.
- Cheat sheets: Handy tables of common functions and requests that tend to clog the Main Thread.