Core Web Vitals 2026: INP Replaces FID – What It Means

What Changed?

In March 2024, Google replaced the old FID (First Input Delay) metric with INP (Interaction to Next Paint). INP is more significant because: - It measures all interactions (not just the first one) - It assesses the actual user experience - It features stricter criteria (making it harder to achieve a 'green' score)

Official Google announcement.

All Core Web Vitals 2026

View the full guide.

INP Details

INP measures the time from: - The user clicking a button / pressing a key / touching the screen - Until the next visual update occurs

Measurement: The 75th percentile of all interactions during a session.

Good INP - Under 200ms → Green - 200–500ms → Yellow - Over 500ms → Red

Average for Estonian websites (2024): 285ms → Yellow zone.

What Slows Down INP?

1. Long JS Tasks JS that blocks the main thread for 50ms+ is a problem.

2. Large DOM Size 10,000+ elements → every interaction requires more rendering effort.

3. Third-party Scripts Google Analytics, Facebook Pixel, chat widgets – all consume performance.

4. React/Vue Over-rendering Re-rendering the entire component tree on every click.

5. Synchronous CSS Render-blocking stylesheet files.

How to Measure INP?

Field Data (Real Users) - [PageSpeed Insights](https://pagespeed.web.dev/) - [Search Console → Core Web Vitals](https://search.google.com/search-console) - [CrUX dataset](https://developer.chrome.com/docs/crux)

Lab Data (Testing) - Chrome DevTools → Performance → Web Vitals - [web-vitals JS library](https://github.com/GoogleChrome/web-vitals)

import {onINP} from 'web-vitals';
onINP(console.log);

Optimisation Strategies

1. Reduce JS Bundle Size Code splitting, tree shaking, dynamic imports: ```tsx const HeavyComponent = React.lazy(() => import('./HeavyComponent')); ```

2. Defer Non-critical JS ```html <script src="analytics.js" defer></script> ```

3. Web Workers Moving long-running calculations to a separate thread: ```js const worker = new Worker('compute.js'); ```

4. requestIdleCallback Non-urgent tasks to free up the main thread: ```js requestIdleCallback(() => { trackAnalyticsEvent(); }); ```

5. Optimise Event Handlers - Debounce keyboard input - Throttle scroll handlers - Passive listeners: `{passive: true}`

6. Reduce DOM Complexity - Virtualise long lists (e.g., react-window) - Remove hidden elements (not just `display: none`) - Simplify nested structures

7. Async/Defer Third-party Scripts ```html <script src="https://www.googletagmanager.com/gtag/js" async></script> ```

8. Server-side Rendering The initial HTML is already present → interactive immediately after JS hydration.

WordPress Tips

Reduce Plugins Every plugin = JS + CSS. Audit your site: - Delete unused ones - Consolidate similar functionalities - Choose high-quality plugins

Optimisation Plugins - **WP Rocket** – includes delay JS, defer JS - **Perfmatters** – flush unused JS/CSS - **Async JavaScript** – free plugin for defer/async

Typical Culprits - Slider Revolution (use CSS sliders instead) - Page builders (e.g., Elementor) – difficult to optimise - Old themes (multiple jQuery scripts)

React/Next.js Tips

React 18+ Features - **useTransition** – for low-priority updates - **useDeferredValue** – to delay slow computations - **Suspense** – for streaming rendering

Avoid - Inline functions in JSX (causes re-renders) - Large context updates - Synchronous heavy computations

Real-world Case Study

E-commerce site, INP 480ms (Poor): - Diagnosis: Elementor + 3 chat widgets + Google Tag Manager - Solution: 1. Replaced Elementor with GeneratePress 2. Lazy-loaded chat widgets 3. Reconfigured GTM - Result: INP 145ms (Green)

Conversions increased by 12% over the following 30 days.

Impact on SEO

Core Web Vitals have been a ranking factor since 2021. Regarding INP specifically: - Good INP → +5–10% ranking improvement in mobile search - Poor INP → penalises rankings, especially for long-tail keywords

See also: - Technical SEO Audit - Loading Speed Guide

Summary

INP is the strictest Core Web Vitals metric – the hardest to achieve and the most impactful on user experience. Our optimisation service includes a full INP audit and optimisation. Request a quote to turn your Core Web Vitals green.

Sources

• web.dev – INP Documentation
• Google Search Central – Core Web Vitals
• HTTP Archive – Web Almanac