CodePark/ questions / Measuring performance
START PRACTICINGPRACTICE
Frontend question · Browser & web performance › Measuring performance

How do you use the Chrome DevTools Performance panel to investigate a slow interaction?

Record the interaction with CPU throttling, find the long tasks on the main thread, and see what they spend time on.

Recording: open the Performance panel. Set CPU throttling, for example 4x slowdown, to act like a mid-range phone. Start recording, do the interaction, then stop.

Reading the recording:

  • The Main track shows a flame chart of tasks on the main thread.
  • Long tasks (over 50 ms) have red corners. Click into them to see which functions took the time.
  • Colours show the type of work: scripting is yellow, style and layout are purple, and painting is green.
  • Purple layout blocks with a warning often mean forced synchronous layout (reading layout right after changing styles).
  • The Interactions track shows how long each interaction took.
  • The summary shows where the time went.

Fixing: fix the biggest cost first. Split long tasks, avoid layout thrashing and reduce re-renders. Then record again to compare.

  • Throttle the CPU to act like a real mid-range device.
  • Read the main thread flame chart, and look for long tasks over 50 ms.
  • Check whether time goes to scripting, rendering or painting.
  • Use the Interactions track and the forced layout warnings.
  • Fix the biggest cost, then record again to compare.