Skip to content
Gallery
Untitled
Dev tools
Accessibility tracker
Share
Explore
Dev tools

icon picker
Performance

⁠
https://developer.chrome.com/docs/devtools/performance
⁠
⁠

megaphone

Always do the performance measurements in Incognito mode. as the browser runs on a clean slate without any extensions creating noise.


Overview section (with FPS, CPU and NET)

fps should be around 60
CPU colors resemble the pie chart of summary tab below
⁠
Screenshot 2024-02-05 at 11.27.39 PM.png
⁠
⁠
hover on CPU or NET for scrubbing to analyze the animations manually
⁠
Screenshot 2024-02-05 at 11.27.59 PM.png
⁠
⁠

Frame section

shows fps value for any screenshot
⁠
Screenshot 2024-02-05 at 11.29.11 PM.png
⁠
⁠

Realtime FPS meter

from rendering tab
cmd+ shift+ P and type show rendering or Settings → More tools → Rendering
enable Frame rendering stats
⁠
Screenshot 2024-02-05 at 11.31.14 PM.png
⁠
⁠


Main section
shows activity of main thread
zoom in
the events that have a triangle to top-right implies it has issues
⁠
Screenshot 2024-02-05 at 11.48.38 PM.png
⁠
⁠
click on such event and summary tab gives more info
⁠
Screenshot 2024-02-05 at 11.54.33 PM.png
⁠
⁠
Initiator highlights the Reveal event from flame graph that initiated this Animation Frame Fried event
app.js:96 takes directly to the line in source code

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.