Field guide to the Chrome DevTools Performance panel

Label “Chrome DevTools. Performance Panel”, title “Reading a performance profile”, subtitle “An interactive field guide to the waterfall, flame chart, LCP, CLS, INP, and the Insights panel”.

Joan León uses interactive figures to walk through the colors of scripting, rendering, painting, loading, and idle work, the anatomy of a network request bar, and the two axes of the flame chart with self time versus total time. It also covers the four LCP phases, layout shifts, INP, compositing, and tables of common function and request signatures.

perf.reviews/profile-guide