Core Web Vitals
in 2026:
what still matters.

In 2026, Google's Core Web Vitals consist of three metrics: LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift). FID was retired in March 2024. All three are confirmed Page Experience ranking signals, with thresholds set at the 75th percentile of real-user field data from the Chrome UX Report.

Google's official position, reiterated in their 2024 documentation update, is that Core Web Vitals are a tiebreaker signal — two pages that are otherwise equal in relevance and E-E-A-T will be separated by their performance scores. In practice, for competitive queries where all top-ranking pages have been SEO-optimised to a similar standard, this tiebreaker operates more like a threshold: pages with "Poor" scores for any metric face a measurable ranking disadvantage, while pages at "Good" see no further benefit over those in the "Needs Improvement" band.

The three metrics: thresholds and what they measure

INP: why it's harder than FID

First Input Delay (FID) measured only the delay before the browser began processing a user's first interaction. It was easy to pass — a high FID could be masked by a page that felt slow after the first interaction. INP measures the worst-case interaction across the entire page lifecycle, using a 98th-percentile aggregation.

The HTTP Archive's 2024 Web Almanac found that 12.4% of mobile sites fail INP at the "Poor" threshold, compared to just 1.7% that failed FID. The primary causes are long JavaScript tasks on the main thread — third-party scripts (analytics, chat widgets, tag managers), client-side rendering frameworks that hydrate large component trees, and event handlers that trigger expensive DOM recalculations.

The optimisation stack we use on every build

LCP optimisation

• Serve hero images in WebP or AVIF — AVIF is 20–50% smaller than WebP at equivalent quality (Google, 2024)
• Add fetchpriority="high" to the LCP image element to tell the browser to prioritise it in the fetch queue
• Self-host critical fonts and preload them with <link rel="preload"> — Google Fonts introduces a cross-origin round-trip that adds 200–400ms
• Use a CDN with edge caching — Time to First Byte (TTFB) under 600ms is required to hit the LCP 2.5s threshold on real-world connections
• Inline critical CSS (above-the-fold styles) to eliminate render-blocking stylesheet requests

INP optimisation

• Break up long tasks (> 50ms) with scheduler.yield() or setTimeout(0) to yield to the browser between chunks
• Audit third-party scripts with Chrome DevTools Performance panel — a single unoptimised analytics tag can add 80–300ms to interaction latency
• Defer non-critical JavaScript with <script defer> or dynamic import() — scripts that don't affect the initial render should not run during it
• Use CSS animations and transitions over JavaScript-driven ones — CSS animations run on the compositor thread and don't block the main thread
• Avoid large React component trees that trigger full re-renders on interaction — use React.memo, useMemo, and component splitting

CLS optimisation

• Always set explicit width and height attributes on <img> elements — without them, the browser doesn't know the image's aspect ratio before it loads
• Reserve space for ads, embeds, and iframes with aspect-ratio or min-height CSS
• Never inject content above existing content without user interaction — dynamically inserted banners, cookie notices, or sticky headers that push content down all contribute to CLS
• Use font-display: optional or font-display: swap with a size-adjusted fallback to prevent layout shift during font loading

Frequently asked questions