Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is a Core Web Vitals metric that measures how long it takes for a page to visually respond after a user interaction — click, tap, or key press. In March 2024, Google promoted INP to an official ranking factor, replacing First Input Delay (FID).
Interaction to Next Paint (INP) is a Core Web Vitals metric that measures how long it takes for a page to visually respond after a user interaction — click, tap, or key press. In March 2024, Google promoted INP to an official ranking factor, replacing First Input Delay (FID).
Why It Matters
FID only captured the delay of the first interaction, but INP tracks every interaction across the page lifecycle and scores by the slowest one. That mirrors what users actually feel. Per Google, as of 2026 around 36% of desktop sites and 45% of mobile sites still fail the "Good" threshold — making INP optimization a clear differentiator over competing pages.
Thresholds
| Rating | INP value |
|---|---|
| Good | ≤ 200ms |
| Needs Improvement | 200–500ms |
| Poor | > 500ms |
Scored at the 75th percentile (p75) of real-user data from the Chrome User Experience Report (CrUX).
What Slows INP Down
Long JavaScript tasks: Any task holding the main thread for more than 50ms blocks the next interaction.
Input delay: Time before an event handler runs because the main thread is busy with other work.
Presentation delay: Time between finishing event handling and the browser painting the next frame — typically driven by complex DOM or layout changes.
How to Optimize
Break up long tasks: Use setTimeout, scheduler.yield(), or requestIdleCallback to split tasks longer than 50ms.
Keep event handlers light: Don't run heavy work inside a click handler — defer it past the next requestAnimationFrame.
Prevent unnecessary re-renders: In React, use memo, useMemo, and useCallback to avoid redundant updates.
Use CSS contain: Properties like contain: content limit layout and paint scope, making frame rendering cheaper.
Defer third-party scripts: Load ads, analytics, and chat widgets with async/defer so they don't block interactions.
Measurement tools: Use PageSpeed Insights, the Web Vitals Chrome extension, and Search Console's Core Web Vitals report for real INP data.
Sources: