Interaction to Next Paint (INP)

What this check does

Reads INP from PageSpeed Insights. INP measures the slowest 98th-percentile interaction (click, tap, keypress) during a page session, in milliseconds. As of March 2024, INP replaced First Input Delay (FID) as the third Core Web Vital.

INP value	Verdict
≤ 200 ms	Good
200–500 ms	Needs improvement
> 500 ms	Poor

Why it matters

INP is the closest performance metric to “does this site feel fast?” Unlike LCP (which measures load) or CLS (which measures stability), INP measures interactivity throughout the session, not just at load.

Poor INP is almost always a JavaScript problem. The main thread is busy running your scripts, so when the user clicks, the click handler queues up behind whatever’s running and the screen lags.

How to fix it

1. Find your worst interactions. In Chrome DevTools, open the Performance tab, record a session that includes the slow interaction. Look for long tasks (>50 ms) right after the click event.

2. Break up long tasks. Any synchronous JavaScript that runs for more than 50 ms blocks user input. Split with await-friendly chunks:

async function processItems(items) {
  for (const item of items) {
    await yieldToMain();
    process(item);
  }
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Modern browsers also have scheduler.yield() (Chromium 129+) which is cleaner.

3. Defer non-critical scripts. Move analytics, ads, A/B-test snippets, chat widgets to load after first interaction (or use requestIdleCallback).

4. Use content-visibility: auto on off-screen sections. The browser skips layout and paint for hidden content until it scrolls into view.

5. Lighten React/Vue/Svelte re-renders. A common INP killer: a click handler triggers a state update that re-renders 500 components. Use memoization (React.memo, useMemo), virtualization for long lists, and granular state slices.

Frequently asked questions

Does PageSpeed Insights show INP?

Yes — both lab and field. Field INP comes from the Chrome User Experience Report (CrUX) for sites with enough traffic; smaller sites only show lab-simulated INP.

Is INP the same as FID?

No. FID measured only the first interaction’s delay. INP measures the worst-case across the whole session, including the click handler runtime and the next paint. INP is roughly 5× harder to optimize for than FID was.

My site is mostly static. Why is INP poor?

Even a static site often has heavy third-party scripts (analytics, chat, consent banners) hogging the main thread. Audit your <script> tags and defer everything that isn’t critical for first paint.