Instructions
In this hands-on, you will learn how to identify, measure, and improve INP using browser DevTools.
Task 1: Measure INP
- Open Chrome DevTools (press F12 or Ctrl+Shift+I / Cmd+Option+I)
- Go to the Performance panel
- Click the Start recording button (circle icon)
- Interact with the buttons below and observe their response time
- Stop the recording and analyze the results
Task 2: Analyze and Improve
- In the performance recording, look for long tasks in the Main thread
- Identify which button has the worst INP and why
- Open
index.js and find ways to optimize the problematic code
- Focus on these optimization techniques:
- Breaking up long tasks
- Removing unnecessary synchronous work
- Using requestAnimationFrame for visual updates
- Re-measure after your optimizations to verify improvement
Pro Tips
- Use the Interactions track in the Performance panel to directly visualize INP
- The Summary tab will show you the total duration of each interaction
- Look for the Input delay, Processing time, and Presentation
delay metrics
- Check the Experience section in the Performance Insights panel for more INP details