INP replacing FID: what frontend teams need to know

In March 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a Core Web Vital. The change was significant. FID measured only the first interaction on a page and only the input delay portion of it. INP measures every interaction throughout the page lifecycle and the full processing time, including event handlers and rendering.

Why the change matters

FID was a forgiving metric. Most pages passed FID because the first interaction usually happened after the page had finished loading, when the main thread was idle. INP is much stricter. It captures the slowest interactions on the page, which often happen later, when the user is actively interacting with the app and the main thread is busy.

If your FID was good but your INP is poor, you are not alone. Most teams saw their Core Web Vitals score drop when INP replaced FID. The good news is that the fixes for INP are well understood.

Common INP offenders

• 01Long tasks on the main thread, usually from third-party scripts.
• 02Synchronous event handlers that do too much work.
• 03Heavy client-side rendering, especially in React and Next.js apps.
• 04Large JavaScript bundles that take a long time to parse and compile.
• 05Heavy use of requestAnimationFrame for non-visual work.

How to optimize INP

The general principle is to keep the main thread idle. Break long tasks into smaller chunks using scheduler.yield or setTimeout. Defer non-critical work out of event handlers using scheduler.postTask. Move heavy computation to a Web Worker. Lazy-load third-party scripts, especially analytics and tag managers.

// Before: long task blocks the main thread
button.addEventListener('click', () => {
  updateUI();
  trackAnalytics();
  saveToLocalStorage();
  sendBeacon();
});

// After: critical work runs immediately, rest is deferred
button.addEventListener('click', async () => {
  updateUI();
  await scheduler.yield();
  trackAnalytics();
  saveToLocalStorage();
  sendBeacon();
});

Measure INP on real users

INP is highly sensitive to device class, browser, and network. A synthetic test from a fast laptop on cable will not reveal the INP problems that real users on mid-range Android phones are experiencing. Use real user monitoring to capture INP for every pageview, then slice the data by device, browser, and country to find the worst offenders.