This demo helps you learn the Chrome DevTools Performance panel by analyzing a simple counter animation.
Adjust the speed and observe how it affects rendering performance.
Performance Panel Features
Recording Performance
Open DevTools (F12) and go to the Performance tab
Click the ⚫ Record button
Interact with the counter below (increase speed)
Click Stop
Analyzing the Recording
FPS Chart: Look at the green bar at the top - dips show frame drops
CPU Chart: Shows how much CPU the browser used
Main Thread: Examine the flame chart to see JavaScript execution
Frames: Check individual frames and their rendering time
Identifying Performance Issues
Try setting the counter to a high speed (100+) and observe:
Red bars in the FPS chart indicating dropped frames
Long tasks in the Main section
The counter may appear to freeze or stutter
0
Pro Tips
Use the Screenshots checkbox when recording to see visual changes
Click on events in the flame chart to see details in the Summary panel
Look for red triangles ⚠️ that indicate long tasks
Try the "Web Vitals" checkbox to see Core Web Vitals metrics