Summary
INP captures slowest interaction latency (click/tap/key) to next frame paint — holistic responsiveness metric. Poor INP: heavy handlers, layout thrashing, large re-renders on click. Optimize event handlers, use transitions, virtualize lists. See checklist for Good/Needs Work/Poor thresholds.
Code example
import { onINP } from 'web-vitals';
onINP((metric) => {
analytics.send({ name: 'INP', value: metric.value, id: metric.id });
});
Key points
- INP captures slowest interaction latency (click/tap/key) to next frame paint — holistic responsiveness metric.
- Poor INP: heavy handlers, layout thrashing, large re-renders on click.
- Optimize event handlers, use transitions, virtualize lists.
- See checklist for Good/Needs Work/Poor thresholds.