Debugging INP: which tool catches the lag?

Debugging INP: which tool catches the lag?

INP (Interaction to Next Paint) measures the delay between a tap and the screen responding. Two tools help, but at different moments. The web-vitals JavaScript library logs the slowest interaction from real visitors. The Performance panel in DevTools records exactly what your own click triggered.

Think of the library as a security camera and the Performance panel as slow-motion replay.

When to use which:
— You don't know which button is slow: the library, because it points at real culprits.
— You already know the button and want to see why: Performance panel, to watch the long task.

Try this: in DevTools open 'Performance', hit record, click the slow element, stop. Look for a long purple block. That block is your lag. Naming the cause is half the cure.