Core Web Vitals 2026: Complete Website Speed Optimisation Guide

What are Core Web Vitals?

Core Web Vitals are the three field-measured metrics Google uses to judge how a real visitor experiences your page. They sit inside the broader page-experience signal and they are reported from the Chrome User Experience Report (CrUX) — meaning they are not a synthetic lab score, they are what your actual users are living through across every device, network and country you serve.

The three metrics each capture a different stage of the page lifecycle. LCP answers "did the main thing load fast?". INP answers "does the page feel responsive when I tap and type?". CLS answers "did stuff stop jumping around?". A site can ace any one of them and still fail the bundle — Google grades you on the 75th percentile of each metric over a rolling 28-day window, and you need to pass all three to be classified as "good".

What are the current LCP, INP and CLS thresholds?

The thresholds have been stable since INP replaced FID in March 2024. They are the same on mobile and desktop, but mobile is almost always the harder fight.

To pass page-experience overall, the 75th percentile of all three must sit in the "good" column. That is the single sentence most teams miss — fixing two of three buys you nothing.

How do you measure Core Web Vitals?

There are two flavours of measurement and you need both. Lab data (synthetic, repeatable) tells you why a page is slow. Field data (real users, via CrUX) tells you whether you are actually passing in Google's eyes.

• PageSpeed Insights — combines a Lighthouse lab run with the last 28 days of CrUX field data for the URL and origin. This is the closest mirror of what Google scores.
• Chrome DevTools Performance panel — record an interaction, see the long tasks, find which script blocked the main thread for 320ms.
• Web Vitals JavaScript library — drop the web-vitals package into your site and post LCP/INP/CLS to your analytics in real time. This is the only way to see the metrics segmented by page template, device, country and release.
• Search Console — Core Web Vitals report — aggregates CrUX across your whole property and groups URLs by similar performance, so you can fix templates instead of pages.
• CrUX dashboard / BigQuery — the raw public dataset. Useful when you need to benchmark against competitors.

One trap: a brand new page has no CrUX history, so PageSpeed Insights will only show lab numbers. That is normal — give it 28 days of real traffic before assuming you have passed.

How do you fix LCP?

LCP is almost always one of three things: a hero image, a hero heading inside a web-font, or a slow server response. The fix order matters.

1. Find the LCP element. In DevTools Performance, the LCP marker tells you exactly which DOM node it is. Do not guess.
2. Make the LCP resource discoverable early. If it is an image, set fetchpriority="high" on the <img> and remove loading="lazy" from above-the-fold media. If it is loaded by client-side JavaScript, preload it with <link rel="preload" as="image">.
3. Compress and resize. Serve modern formats (AVIF, then WebP), at the actual rendered size, with responsive srcset. A 1920px hero on a 390px iPhone is the single most common LCP killer.
4. Cut server response time (TTFB). If TTFB is over 600ms you cannot win LCP. Cache the HTML at the edge, use a CDN with POPs near your audience, and warm up dynamic routes.
5. Self-host critical fonts with font-display: swap and preload the one weight used by the hero heading.

How do you fix INP?

INP measures the worst input delay across the whole visit. It punishes single big JavaScript tasks that block the main thread when a user taps a button or types in a field. INP is the metric most React, Vue and WordPress sites fail in 2026.

• Break up long tasks. Any task longer than 50ms blocks input. Use scheduler.yield(), requestIdleCallback, or simple await new Promise(r => setTimeout(r, 0)) to yield between chunks of work.
• Defer hydration. If you ship a React or Vue SPA, hydrate islands on interaction, not on load. Frameworks like Astro, Qwik and Next.js (with server components) let you ship dramatically less client JavaScript.
• Audit third-party scripts. Analytics, chat widgets, A/B testing tools and tag managers are the biggest INP offenders. Move what you can to type="module" with async, and load chat widgets after first interaction.
• Use CSS, not JavaScript, for animations. CSS transitions and view-transitions run on the compositor thread; JS animations block input.
• Avoid forced synchronous layout. Reading offsetWidth after a style change triggers layout thrash. Batch reads then writes.

How do you fix CLS?

CLS is the easiest to fix and the most embarrassing to fail. Almost every CLS issue is "something arrived after first paint and pushed the content down".

1. Always set width and height on images and video — or use a CSS aspect-ratio box. The browser then reserves the slot before the asset loads.
2. Reserve space for ads, embeds and iframes with a fixed minimum height container.
3. Avoid injecting banners, cookie bars or promos above existing content. Insert them at the bottom or as a fixed overlay.
4. Use size-adjust or font-display: optional to stop late-loading web fonts from re-flowing the text.
5. Avoid layout-changing CSS animations (animating top, height). Animate transform and opacity instead — they do not affect layout.

Why do Core Web Vitals matter for SEO and revenue?

Two reasons. First, Google's documented page-experience signal uses them as a ranking tiebreaker — between two pages of similar relevance, the faster one wins. Second, and more importantly, every published study (Google, Cloudflare, Akamai, Shopify) shows the same pattern: a 1-second improvement in LCP lifts conversion by roughly 7–10% on commerce, and bounce rate climbs almost linearly past a 3-second LCP.

At RioCloud Solutions we treat Core Web Vitals as an SEO-and-revenue lever, not a vanity score. When we cut LCP on a Norwegian e-commerce client's product pages from 4.1s to 1.8s, the same campaign budget produced 18% more checkouts in the next month — no copy or design change. The performance work paid for itself before the invoice cleared. That sort of result is also what made our wider e-commerce cloud cost audits compounding wins.

What is the fastest tech stack for good Core Web Vitals?

No stack is automatically fast and no stack is automatically slow — but some make passing easier than others. In our 2026 client work the most consistent passers are: static or hybrid frameworks (Astro, Next.js with the App Router and server components, Nuxt 3) served from a global edge (Vercel, Cloudflare, Netlify), with images on a transforming CDN (Cloudflare Images, imgix, Vercel Image), and any heavy widgets isolated as lazy islands.

Server-rendered PHP can absolutely pass — WordPress with a good caching plugin, a CDN, and disciplined plugin choices regularly clears all three vitals. What rarely passes without major rework: a single-page React app loaded behind a slow API and a tag-manager soup. If you are deciding stack for a new build, see our breakdown of React vs Next.js vs PHP for business websites.

Frequently asked questions about Core Web Vitals

Are Core Web Vitals a Google ranking factor in 2026?

Yes — they remain part of Google's page-experience signal. They are not the dominant factor, but between two relevant results the faster one wins, and consistently poor vitals can demote a site below faster competitors for the same query.

What replaced FID, and why?

INP (interaction to next paint) replaced FID in March 2024 because FID only measured the delay before the first input was processed. INP measures every interaction across the visit and reports the worst, which is a much truer picture of how responsive a page feels.

How long does it take for Core Web Vitals improvements to show up in Search Console?

CrUX rolls on a 28-day window, so it takes about a month of real traffic before Search Console reflects a fix. PageSpeed Insights will show the improvement in its lab section immediately and in its field section as the 28-day window slides forward.

Do Core Web Vitals affect AI search visibility?

Indirectly, yes. AI engines like ChatGPT, Perplexity and Gemini retrieve pages in real time — slow or timed-out responses simply do not get cited. For more on optimising for AI answers, see our guide to Generative Engine Optimisation.

Is Lighthouse score the same as Core Web Vitals?

No. Lighthouse is a lab tool that simulates a single load and produces a 0–100 performance score. Core Web Vitals are the field metrics Google actually uses for ranking. A page can score 100 in Lighthouse and still fail vitals if real-user devices are slower than the simulation.

Can a WordPress site pass Core Web Vitals?

Yes — with a good host, a caching plugin (LiteSpeed Cache, WP Rocket), a CDN, an image-optimisation plugin, and aggressive plugin pruning. We have shipped multiple WordPress builds that pass all three vitals on mobile. The killer is usually a heavy theme plus 30 plugins, not WordPress itself.

Can RioCloud Solutions audit my Core Web Vitals?

Yes — we run a fixed-scope Core Web Vitals audit that combines CrUX field data, Lighthouse lab data, and a full RUM trace, then ships you a prioritised fix list with effort estimates. Book a free 30-minute review and we will run your top templates live.

Next steps

Start by opening PageSpeed Insights for your top three templates (home, category, product or service, blog post). Note the field-data status for LCP, INP and CLS. If any are red or orange, follow the fix order in this guide: LCP first (it usually unlocks the others), then INP, then CLS.

If you would rather have it done for you, book a free Core Web Vitals review — we will profile your top templates, hand you a prioritised fix list with effort estimates, and quote you a fixed-price ship. While you wait, read our companion pieces on picking the right stack for a business website and how AI engines decide which sites to cite.