The Rise of INP: Why Interaction to Next Paint Is Replacing FID

In March 2024, Google officially replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a Core Web Vital. If you're still optimizing for FID, you're optimizing for a metric that no longer exists.

Why FID Had to Go

FID only measured the delay of the first interaction on a page. A user could tap a button, get a fast response, and FID would score "Good" — even if every subsequent interaction was painfully slow.

This created a blind spot. Pages that felt sluggish throughout the user journey could still pass FID with flying colors.

What INP Actually Measures

INP observes the latency of every interaction a user makes during their visit — clicks, taps, and keyboard inputs. It then reports the worst interaction (with some outlier handling for pages with many interactions).

The INP value is the time from when the user interacts to when the browser paints the next frame in response.

INP Thresholds

INP Score	Rating
≤ 200ms	Good
200–500ms	Needs Improvement
> 500ms	Poor

The Three Phases of an Interaction

Every interaction has three phases, and optimizing INP means reducing all three:

1. Input Delay

The time between the user's action and the browser starting to process the event handler. This is caused by the main thread being busy with other tasks.

2. Processing Time

The time spent executing the event handler(s). Complex JavaScript, DOM manipulation, and synchronous API calls all contribute.

3. Presentation Delay

The time from when the event handler finishes to when the browser paints the updated frame. Layout recalculations and rendering work happen here.

Common INP Killers

Long Tasks on the Main Thread

Any JavaScript task over 50ms is a "long task." While a long task runs, the browser can't respond to user input. Common culprits:

• Analytics libraries initializing
• Large React re-renders
• JSON parsing of large datasets
• Complex DOM queries

Excessive DOM Size

Pages with thousands of DOM nodes take longer to update. Every style recalculation and layout pass scales with DOM complexity.

Synchronous Third-Party Scripts

Chat widgets, A/B testing tools, and ad scripts that run synchronously block the main thread.

How to Improve INP

Break Up Long Tasks

Use setTimeout, requestAnimationFrame, or the newer scheduler.yield() to break large JavaScript operations into smaller chunks:

async function processItems(items) {
  for (const item of items) {
    processItem(item);
    // Yield to the browser between items
    await scheduler.yield();
  }
}

Use startViewTransition for Visual Updates

The View Transitions API lets browsers optimize rendering:

document.startViewTransition(() => {
  updateDOM();
});

Debounce and Throttle Input Handlers

Don't run heavy logic on every keystroke or scroll event:

const handler = debounce((e) => {
  // expensive operation
}, 150);
input.addEventListener('input', handler);

Lazy-Load Non-Critical JavaScript

Use dynamic imports to load code only when needed:

button.addEventListener('click', async () => {
  const { heavyModule } = await import('./heavy-module.js');
  heavyModule.run();
});

Reduce DOM Size

• Use virtualization for long lists (react-window, tanstack-virtual)
• Remove hidden elements from the DOM instead of using display: none
• Paginate content instead of rendering thousands of items

Measuring INP

In the Field

INP is a field metric — it's best measured with real user data. Tools:

• Chrome User Experience Report (CrUX) — aggregated from real Chrome users
• PageSpeed Insights — shows field INP if sufficient data exists
• web-vitals JavaScript library — capture INP in your own analytics

In the Lab

While INP is primarily a field metric, you can simulate it:

• Chrome DevTools → Performance panel → Interactions track
• Lighthouse Timespan mode — measures interactions during a defined period

INP vs. FID: The Key Differences

Aspect	FID	INP
Measures	First interaction only	All interactions
Reports	Input delay only	Full interaction latency
Threshold (Good)	≤ 100ms	≤ 200ms
Core Web Vital	Retired March 2024	Active since March 2024

The Business Impact

Pages with poor INP feel "janky" and unresponsive. Users associate slow interactions with:

• Broken functionality ("Did my click register?")
• Low trust ("This site seems sketchy")
• Abandonment ("I'll try a competitor")

An analysis by Google found that sites improving INP from Poor to Good saw up to 20% reduction in bounce rate.

Start Tracking INP Today

If you're not monitoring INP alongside LCP and CLS, you're flying blind on interactivity. BadPageSpeed tracks all three Core Web Vitals automatically.

Related Reading

• Fix Total Blocking Time (TBT): Unblock Your Main Thread
• Core Web Vitals in 2026: The Complete Guide for Marketers
• Field Data vs. Lab Data: Which One Should You Trust?

Start monitoring your INP for free →