Home·Blog·Performance
Performance

Core Web Vitals 2025: INP Replaced FID — Here Is What to Do.

Interaction to Next Paint is now a ranking signal. Learn how to measure INP, identify slow interactions, and optimize your JavaScript for a better score.

10 min readApr 2025Ababil.sec

In March 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a Core Web Vital. This change has real ranking implications — and many sites that had good FID scores are discovering their INP is poor.

What Is INP?

INP measures the latency of all interactions during a page visit — clicks, taps, and keyboard inputs — and reports the worst one. Unlike FID, which measured only the first interaction, INP captures the full responsiveness of your page throughout the user's session.

The thresholds: Good is under 200ms. Needs Improvement is 200-500ms. Poor is over 500ms.

Why FID Was Not Enough

FID measured only the delay before the browser began processing the first user interaction — not how long that processing actually took. A page could have excellent FID but terrible responsiveness throughout the rest of the session. INP captures the full picture.

Measuring INP

Use Chrome DevTools Performance panel to record interactions and measure their duration. The web-vitals JavaScript library reports INP from real users:

import { onINP } from 'web-vitals';

onINP(({ value, rating, attribution }) => {
  console.log('INP:', value, rating);
  console.log('Slow interaction:', attribution.interactionTarget);
});

Google Search Console's Core Web Vitals report shows INP data aggregated from real Chrome users visiting your site.

Common Causes of Poor INP

  • Long JavaScript tasks blocking the main thread during interactions
  • Synchronous state updates causing large React re-renders on interaction
  • Heavy third-party scripts (analytics, chat widgets) competing for main thread time
  • Unoptimized event handlers doing too much work synchronously

Optimizing for INP

Break Up Long Tasks

Use scheduler.yield() or setTimeout to break long synchronous work into smaller chunks, yielding control back to the browser between them. This allows the browser to process user interactions between chunks.

Defer Non-Critical Work

Move analytics, logging, and non-critical updates out of interaction handlers. Use requestIdleCallback for work that can wait until the browser is idle.

Use React's startTransition

Mark non-urgent state updates as transitions so React can interrupt them to process user interactions:

import { startTransition } from 'react';

function handleSearch(query) {
  startTransition(() => {
    setSearchResults(search(query));
  });
}

Audit Third-Party Scripts

Third-party scripts are a major source of main thread contention. Audit every third-party tag with Chrome DevTools, defer loading non-critical scripts, and consider self-hosting critical third-party resources.

Conclusion

INP is a more honest measure of page responsiveness than FID was. Improving your INP requires understanding which interactions are slow, tracing them to their JavaScript root cause, and systematically reducing main thread blocking. The payoff is both better rankings and a genuinely more responsive experience for your users.

Ready to Secure Your
Project?

Get a professional security audit or start a project with us today.

Start a Project
Related Articles