What is INP (Interaction to Next Paint) and how does it differ from FID?

FID (First Input Delay) — measured the delay between the first user interaction and when the browser could begin processing it. Only the first interaction counted.

INP (Interaction to Next Paint) — replaced FID in March 2024. Measures the full duration of the worst interaction across the entire page visit: input delay + processing time + presentation delay.

Why INP is a better metric:

• FID missed slow interactions that occurred after the first one (e.g., a slow button click on a long session).
• FID only measured input delay, not how long the response took to render — an interaction could start instantly but still feel sluggish.
• INP captures the full user experience of responsiveness throughout the session.

How to improve INP:

• Break up long tasks — tasks over 50ms block the main thread. Use scheduler.yield() or setTimeout(0) to yield between chunks.
• Avoid heavy synchronous work on interaction — defer non-critical updates, use startTransition in React 18 to mark non-urgent renders.
• Reduce main thread blocking — move heavy computation to Web Workers.