When Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a Core Web Vital in March 2024, a lot of agencies assumed it wouldn't change much in practice. INP measures the latency of all interactions on a page — clicks, taps, keyboard inputs — not just the first one. In the first six months after the switch, INP failures became the most common Core Web Vitals issue we see in new client audits. And unlike LCP or CLS, fixing them requires understanding your JavaScript execution model, not just your image loading strategy.
Why INP Is Harder Than FID
FID only measured the delay before the browser could process the first user interaction. A page could have terrible INP scores while passing FID if most of the heavy JavaScript ran before the first interaction. INP measures throughout the page lifetime, which means a page that loads quickly but has expensive click handlers, slow filter animations, or heavy re-renders on form input can fail INP while passing every other metric.
The "Good" threshold is under 200ms. The "Needs Improvement" range is 200–500ms. "Poor" is above 500ms. In our audits of agency websites built in the last two years, we've found that approximately 40% have at least one page with INP scores in the "Needs Improvement" or "Poor" range — and almost none of the agencies knew about it before we flagged it.
The Most Common Causes
Heavy third-party scripts are the leading cause. Chat widgets, analytics platforms, A/B testing tools, and ad tags all run JavaScript on the main thread and can significantly delay interaction processing. A common pattern we see: an agency site loads clean and fast (good LCP, good CLS) but has three chat tools installed from client experiments over two years. The combined JavaScript weight of those tools, even when bundled, creates interaction delays that tank INP scores.
The second most common cause is large event handlers. React's synthetic event system is efficient, but event handlers that trigger expensive state updates, re-render large component trees, or make synchronous DOM mutations will block the main thread and inflate INP. The fix is usually a combination of debouncing, moving state updates to transitions using React's useTransition hook, and auditing component re-render scope.
The Fix Strategy
Start with Chrome DevTools' Performance panel and the Web Vitals Chrome extension to identify which interactions are triggering poor INP. Long tasks (anything over 50ms on the main thread) will show as red bars in the flame chart. Match those to user interactions to identify the specific handlers causing problems.
For third-party scripts, implement a loading strategy: defer scripts that don't need to run before the page is interactive, load chat widgets only after user interaction if they're not needed immediately, and audit your tag manager payload quarterly. Third-party script debt compounds faster than you'd expect.
For React applications, React 18's concurrent features — Suspense, useTransition, useDeferredValue — exist specifically to prevent state updates from blocking user interactions. If you're on React 18 or 19 and not using these primitives in components that handle user input, you're leaving performance on the table.
The Ranking Impact
Google doesn't publish exact ranking formulas, but the correlation between Core Web Vitals scores and organic ranking positions has strengthened consistently since the Page Experience update. For competitive local search queries in markets like Lagos, Kingston, and Toronto, the performance gap between a well-optimised site and a mediocre one is now large enough to be visible in ranking data. It's not the only factor, but it's a factor you control entirely, which makes it one of the highest-leverage areas for SEO investment.
