INP (Interaction to Next Paint)

INP measures page responsiveness by observing the latency of all clicks, taps, and keyboard interactions. Target: under 200 ms.

Definition

INP is a Core Web Vital assessing responsiveness from user interaction to the next painted frame. It replaced FID in March 2024. Unlike FID, INP observes all interactions across the full page lifecycle and reports the worst latency (with outlier smoothing).

Why INP Replaced FID

FID only measured input delay. INP measures end-to-end from input to pixel update. FID only looked at the first interaction; INP captures worst-case across the session.

Common Misunderstandings

INP does NOT measure all effects like network fetches. Only time until the next paint is blocked. Reports the worst interaction, not the average.

Main Causes

Long JavaScript tasks blocking the main thread. Heavy framework re-renders, complex CSS animations, excessive DOM size, third-party scripts.

Optimization

Break up long tasks with scheduler.yield(). Defer non-essential JS. Use content-visibility: auto. Show immediate visual feedback. Use Web Workers.

Note

Worst interaction with outlier smoothing: for >50 interactions, the single worst is excluded.

In code

button.addEventListener('click', async () => {
  showSpinner(); // immediate feedback
  await scheduler.yield(); // yield for paint
  // ... then do expensive work
});

Common questions

Q: Does INP capture network time?

A: No. Only time until next paint is possible.

Thresholds

Rating: Good, INP Threshold: ≤ 200 ms

Rating: Needs Improvement, INP Threshold: 200 ms - 500 ms

Rating: Poor, INP Threshold: > 500 ms

Key takeaways:

• Measures end-to-end interaction latency.

• Target: ≤ 200 ms at p75.

• Replaced FID March 2024.

• Worst interaction reported with smoothing.