INP vs FID: The Core Web Vitals Change Nobody Saw Coming

In March 2024, Google changed a Core Web Vital. Most websites have yet to adapt.

First Input Delay (FID) was the interactivity metric for Core Web Vitals since 2020. It was relatively easy to pass — 97% of websites met the 100ms threshold. That's why Google retired it and replaced it with Interaction to Next Paint (INP).

INP is an entirely different beast. Many sites that had perfect CWVs are now in the red. This change, though announced in advance, caught many businesses off guard, especially those with complex web infrastructures or dependencies on third parties.

In our experience working with clients in 2024, the percentage of websites with a 'Good' INP has drastically fallen. Previously, it was common to see almost 100% of sites pass FID; now, only 30-40% achieve an optimal INP without intervention. This underscores the importance of addressing this metric seriously, as it directly impacts user experience and, consequently, SEO ranking.

What INP Measures vs. What FID Measured

FID measured only one thing: the time between the user's first click/tap and when the browser started processing that event. Only the first input. Only the initial delay. It was a metric that offered a very limited view of interactivity, similar to judging a book by its first sentence.

INP measures:

• All interactions during the entire session (not just the first), including clicks, taps, and keyboard presses.
• The total time: input delay + processing time (how long the browser takes to execute event handlers) + presentation delay (how long the browser takes to paint visual changes on screen).
• Selects the slowest interaction (or the 75th percentile if there are many interactions, for high-traffic sites). This means a single point of friction can drag down the overall score.

FID was a pop quiz from the first minute of class. INP is the final exam for the entire semester. This change reflects Google's focus on the actual user experience, where interactivity is not limited to the first contact but encompasses the visitor's entire journey on the site.

In 2023, Google was already warning about the need for more robust metrics. The introduction of INP in 2024 aligns with the evolution of web standards and user expectations, which demand increasingly responsive and fluid sites. A 2022 Google study already indicated that a delay of just 100ms in interactivity could reduce conversions by 7%. With INP, this impact could be even greater if key interactions are slow.

Why INP Is Harder to Pass

The Main Thread Is Overloaded

Third-party JavaScript (analytics, tag managers, chat widgets, A/B testing) competes for CPU time. When the user clicks, the browser cannot respond until the current JavaScript task is finished. Tools like Google Tag Manager, if not optimised, can inject scripts that block the main thread. In 2024, with the growing adoption of GA4 and the need for more granular tracking, this problem has become more pronounced. Regularly auditing third-party scripts is crucial.

A common mistake is loading multiple third-party scripts synchronously at the beginning of the page. This not only affects INP but also other metrics like Largest Contentful Paint (LCP). Intelligent prioritisation and deferral of these scripts are vital.

React/Vue/Next Have Costly Re-renders

In SPA (Single Page Applications) built with frameworks like React, Vue, or Next.js, each interaction can trigger a full or partial component re-render. If the component is complex, processing time skyrockets. This is especially true for components with large data lists, interactive graphs, or forms with extensive logic.

In our experience, many developers focus on initial load speed and neglect re-render optimisation. A component that updates unnecessarily or recalculates complex values on every render can be a significant bottleneck for INP. Debugging these issues requires a deep understanding of the framework's lifecycle and specific optimisation techniques.

Event Handlers with Heavy Logic

A click that triggers validation, an API request, and a DOM update — all synchronous — can take 300ms+. If this sequence of events occurs on the main thread without interruptions, the browser will freeze and be unable to respond to other user interactions. This is particularly problematic in complex forms or highly interactive user interfaces.

A practical example we've seen is an 'Add to Cart' button that, when clicked, performs several client-side validations, sends an AJAX request to the server, waits for the response, and then updates multiple DOM elements. If any of these operations are slow or blocking, the INP for that interaction will be poor.

How to Optimise INP

INP optimisation requires a holistic approach, combining improvements in code, architecture, and resource management.

• Identify slow interactions: Use the browser's Performance API (performance.measure()) or the web-vitals library with attribution to pinpoint exactly which interaction causes the problem. Chrome DevTools, particularly the 'Performance' tab, is an invaluable tool for visualising the main thread and detecting long tasks. In 2024, tools like Lighthouse and PageSpeed Insights already offer specific INP diagnostics, highlighting problematic interactions.
• Break up long tasks: Use scheduler.yield() (an experimental but promising API) or setTimeout(0) to split long JavaScript tasks into smaller chunks. This allows the browser to respond to other interactions while processing the code. Another technique is using Web Workers to delegate computationally intensive tasks to a separate thread, freeing up the main thread.
• Defer third-party scripts: Load analytics, chat, and other scripts after the first paint, or use attributes like defer or async. Do not block the main thread during interaction. Prioritise what the user needs to see and interact with first. For critical scripts, consider using <link rel="preload">.
• Optimise re-renders: In React, use useMemo, useCallback, and virtualisation for long lists to avoid unnecessary renders. In Vue, use v-once and computed properties. Understanding when and why a component renders is key. Tools like React DevTools or Vue Devtools can help you identify components that render too frequently.
• CSS containment: Use contain: layout style paint to limit the area the browser needs to repaint. This reduces the browser's rendering work, especially in dynamic components. It is also useful to optimise CSS, removing unused styles (PurgeCSS) and minimising selector complexity.
• Minimise main thread work: Reduce the amount of JavaScript executed. Do you really need that library? Can it be done more efficiently? 'Tree Shaking' and 'Code Splitting' are essential techniques for reducing JavaScript bundle size.
• Optimise network requests: If an interaction depends on an API request, ensure it is as fast as possible. Use caches, HTTP/2 or HTTP/3, and consider data pre-fetching.
• Use Server-Side Rendering (SSR) or Static Site Generation (SSG): For sites with a lot of static content or that need a very fast initial load, SSR or SSG can reduce the amount of JavaScript needed on the client and improve initial interactivity.

The INP Threshold

• Good: less than 200ms
• Needs Improvement: 200-500ms
• Poor: more than 500ms

Compared to FID (threshold: 100ms), INP seems more generous. But since it measures the full time of the worst interaction, it is much harder to achieve. A single slow spike can ruin your score, even if the rest of the site is fast.

These thresholds are dynamic and Google adjusts them periodically. Staying below 200ms is the goal to ensure a fluid user experience and good SEO performance. In 2024, with the growing importance of user experience in Google's algorithms (especially after the Helpful Content Update), good INP is more crucial than ever.

INP and Its Impact on SEO in 2024-2026

The introduction of INP as a Core Web Vital reaffirms Google's commitment to user experience as a ranking factor. Poor INP can lead to higher bounce rates, lower time on page, and worse positioning in search results.

E-E-A-T and User Experience

Although INP is not directly related to E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness), a good user experience, facilitated by optimal INP, indirectly contributes to the user's 'Experience' on the site. A slow and unresponsive site generates frustration and reduces trust, which can affect the overall perception of the brand.

Impact on Conversational Search (AI Search)

With the rise of generative AI in search (ChatGPT, Perplexity AI, Google SGE), the speed and interactivity of a website become even more critical. If a user arrives at your site via an AI response, they will expect a fluid experience. Poor INP could cause the user to quickly return to the AI interface in search of a faster, more efficient source, reducing qualified traffic and conversions.

GA4 and INP Monitoring

With the full transition to Google Analytics 4 (GA4), setting up monitoring for performance metrics, including INP, is fundamental. Although GA4 does not have a native Core Web Vitals report like Universal Analytics, custom events can be configured to track the performance of INP and other interaction metrics. This allows marketing and development teams to gain a more complete view of performance's impact on user behaviour.

At ZDS, we implement personalised dashboards in GA4 and Looker Studio (now Google Looker Studio) for our clients, combining INP data with business metrics such as conversion rate and time on page. This allows us to identify correlations and prioritise optimisations with the greatest impact.

Common Mistakes When Optimising INP

In our experience, these are some of the most frequent mistakes companies make when trying to improve their INP:

• Ignoring the problem until it's too late: Many companies only act when they see a significant drop in their ranking or traffic, instead of proactively monitoring.
• Focusing only on initial load: Optimising LCP or FCP does not guarantee good INP. Interactivity is a different phase of the page lifecycle.
• Overloading the DOM: An excessively complex DOM or one with many hidden elements can slow down updates and repainting, affecting INP.
• Not testing on real devices: Testing in a development environment or with high-speed connections does not always reflect the real user experience. It is crucial to test on mid-range mobile devices and with simulated 3G/4G connections.
• Excessive use of CSS/JS animations: Complex or poorly optimised animations can block the main thread and affect interactivity.
• Lack of communication between teams: Development, design, and marketing teams must collaborate to ensure performance optimisations are a priority from the start of the project.

Recommended Tools for INP Diagnosis and Optimisation (2026)

To effectively address INP challenges, we recommend the following tools:

• Google Chrome DevTools: The 'Performance' tab is indispensable for analysing the main thread, identifying long tasks, and visualising interaction events. The 'Performance Insights' feature offers guided analysis.
• PageSpeed Insights: Provides field data (CrUX) and lab data for INP, along with specific recommendations. It is Google's reference tool.
• Lighthouse: Integrated into Chrome DevTools and PageSpeed Insights, it offers a complete performance audit, including interactivity metrics.
• Web-vitals JavaScript library: For real-time INP monitoring (RUM – Real User Monitoring) on your website. It allows you to collect INP data from real users and send it to your analytics tool (GA4, for example).
• Sentry or Bugsnag: For error and performance monitoring in production, which can impact interactivity.
• Webpack Bundle Analyzer: To visualise the content of your JavaScript and CSS bundles, identifying heavy libraries or unused code.
• Cloudflare or Akamai: For Content Delivery Network (CDN) optimisation, which can speed up resource loading and reduce server response time, indirectly impacting INP.

Is your site's INP in the red? At ZDS, we diagnose exactly which interactions cause the problem and how to fix it. Our approach is based on real data and the latest Google guidelines, ensuring your site not only meets current standards but is prepared for future web trends. Technical CWV Audit.

Adapting to INP is an investment in user experience and the future of your online presence. At ZDS, we are ready to help you navigate this change and ensure your website shines from 2026 and beyond.