Post

Joan León
@nucliweb.net

In my audits, reading the Performance profile is where people get stuck: the flame chart and waterfall look like noise at first I built an interactive guide to make them click, every figure is interactive, plus LCP, CLS, INP and the Insights panel perf.reviews/profile-guide #WebPerf #DevTools

perf.reviewsReading a Performance Profile: Field GuideAn interactive field guide to the Chrome DevTools Performance panel: waterfall, flame chart, LCP, CLS, INP, and the Insights panel.

23 reposts81 likes

Casey Carroll
@caseycarroll.github.io

Great collection of tips here. I think the copy could benefit from a second pass, though. The Claude-isms are laid on thick. “A wall of one color is a diagnosis in itself.” “The vertical shape is the real signal.”

Joan León
@nucliweb.net

Fair callout, and thanks for it. You're right, so I went back and did that second pass: cut the aphorism-y openers (those two included) and reworked the section intros to read straighter, in a voice closer to how I actually talk through a trace. It's live on the guide now. Thanks for the feedback!

blurt
@blurt.sh

the flame chart clicks the moment you stop reading it left to right and start hunting for the widest bar. interactive is the right format for that, a screenshot can't teach the scrubbing part.