Core Web Vitals Optimization Guide

Core Web Vitals are Google's three user experience metrics: LCP (how fast the main content loads), INP (how quickly the page responds to interaction), and CLS (how stable the layout is during load). Google uses them as ranking signals. Poor scores do not tank rankings on their own, but when a page is competing with a similar-quality competitor and one loads faster and responds better, the CWV scores matter. Here is what they mean, how to measure them, and what to fix first.

Google looks at a lot of factors when deciding how to rank a page. Core Web Vitals are three of them, and they are the ones you can measure directly, benchmark against specific thresholds, and fix systematically.

I have run CWV audits across clients from small ecommerce stores to enterprise sites with hundreds of thousands of pages. The issues are almost always the same. The fixes are almost always the same. What varies is the priority — which pages to fix first, which bottlenecks are actually causing the problem, and which "improvements" are not worth the dev time.

What are Core Web Vitals?

Core Web Vitals focus on three measurable aspects of how people experience your site:

• Largest Contentful Paint (LCP): How quickly the largest visible element on the page loads — usually a hero image or a large heading block.
• Interaction to Next Paint (INP): How fast the page responds when a user interacts with it. INP replaced FID (First Input Delay) as an official Core Web Vital in March 2024.
• Cumulative Layout Shift (CLS): How stable the layout is during load. A high CLS score means elements are jumping around while the page loads — a common problem with late-loading ads, cookie banners and fonts.

Google measures these at the 75th percentile of real user sessions using the Chrome User Experience Report (CrUX). That matters: you are not being judged on a single lab test, but on how your site performs for three out of four real visitors.

Core Web Vitals benchmarks

Google uses three thresholds for each metric: Good, Needs Improvement, and Poor.

Getting to "Good" on all three is the goal. "Needs Improvement" does not trigger a penalty, but it leaves you behind competitors who are in the Good zone. "Poor" is where you genuinely lose rankings.

How to check your Core Web Vitals

Three free tools, each showing slightly different data:

• Google Search Console: Find "Core Web Vitals" under the Experience tab. Shows real user data (field data) aggregated across your site, split by mobile and desktop. This is the official signal Google uses for ranking.
• Google PageSpeed Insights: Combines field data (from CrUX) with a lab test (Lighthouse). Use this for individual page diagnosis — it shows exactly which elements are causing LCP, which JavaScript tasks are causing INP issues, and where layout shifts are coming from.
• Chrome DevTools: Performance panel for live debugging. Most useful when you know what to look for.

Start with Search Console to identify which pages are failing. Then use PageSpeed Insights on those specific pages to diagnose the cause.

What I check first when auditing Core Web Vitals

When a client's CWV scores are poor, I almost always start in the same place — not with LCP or CLS, but with server response time (TTFB). A slow server adds latency to every subsequent metric. Fix the foundation first.

After that, the most common culprits I see:

• LCP failures: Almost always an unoptimised hero image. The hero is usually the largest element on the page, so it drives LCP directly. Fixes: compress the image, switch to WebP or AVIF, preload it in the HTML head so the browser finds it before it parses the full page. On Shopify and other hosted platforms, the theme controls the hero — often a single theme setting change is all that is needed.
• INP failures: Heavy JavaScript executing during the page load. The worst offenders are tag managers firing dozens of third-party scripts, heavy React or Vue applications that block the main thread, and inline event listeners on every element. Fix: audit your tag manager payloads, defer non-essential scripts, and break long tasks into smaller ones.
• CLS failures: Unsized images and late-loading elements (ads, cookie banners, dynamically injected content). Fix: always set explicit width and height attributes on images and video embeds. Reserve space for ads before they load.

The diagnostic loop: Search Console to find the affected pages, PageSpeed Insights to identify the cause, a dev sprint to apply the fix, then monitor CrUX over the following 28 days (Google's data has a 28-day rolling window, so improvements take time to show up).

Optimising each Core Web Vital

LCP (Largest Contentful Paint)

LCP measures how quickly the largest visible element on the page loads. To improve it:

• Speed up server response: Upgrade hosting or add a CDN. Cloudflare's free tier fixes TTFB for most sites.
• Preload the LCP element: Add <link rel="preload"> for the hero image in the HTML head so the browser discovers it immediately.
• Eliminate render-blocking resources: Defer or async-load JavaScript that is not needed for the initial render. Move critical CSS inline.
• Compress and modernise images: WebP is now supported everywhere. AVIF is better still. Compress without visible quality loss.

INP (Interaction to Next Paint)

INP measures responsiveness — how quickly the page paints something new after a user interaction. To improve it:

• Audit your tag manager: Every tag fires JavaScript on the main thread. Remove unused tags. Defer the rest until after the page is interactive.
• Break up long tasks: Any JavaScript task over 50ms is a long task. Use scheduler.postTask() or requestIdleCallback() to split them across frames.
• Minimise third-party scripts: Chat widgets, analytics, heatmaps — all contribute to INP. Load them after the first user interaction where possible.

CLS (Cumulative Layout Shift)

CLS measures visual stability. To improve it:

• Set explicit dimensions on all images and embeds: If the browser knows the size before the image loads, it reserves the space. Use width and height attributes on every img tag.
• Reserve space for ads: If the ad container loads before the ad, the ad pushes content down. Set a min-height on ad containers.
• Avoid inserting content above the fold dynamically: Cookie banners, notification bars and pop-ups added after load all cause CLS.

Core Web Vitals and AI search

AI search engines like ChatGPT, Perplexity and Google AI Overviews retrieve content from the web. Google's AI Overviews, in particular, pull from Google's index — and Google's index reflects ranking signals, which include CWV.

The connection is indirect but real: pages with poor Core Web Vitals that rank at position 20 are less likely to be retrieved than pages with good CWV that rank at position 5 for the same query. CWV is not a direct AI citation signal, but it feeds into the organic ranking that determines which pages get into the retrieval pool.

The more direct concern for AI search is crawlability: a page that loads slowly or has heavy JavaScript rendering may not be fully processed by Googlebot, which means its content is not available for retrieval at all. Technical SEO for AI search covers this in more depth.

FAQ

Do Core Web Vitals directly affect Google rankings?

Yes, Core Web Vitals are an official Google ranking signal, part of the Page Experience update. However, they are one of many signals. Relevance, E-E-A-T, backlinks and content quality generally outweigh CWV for competitive queries. Where CWV matters most: when two pages are roughly equal in relevance and authority, the page with better CWV scores tends to rank higher.

What replaced FID in Core Web Vitals?

Interaction to Next Paint (INP) replaced First Input Delay (FID) as an official Core Web Vital in March 2024. INP is a more complete measure of responsiveness — FID only measured the delay before the browser could start processing an interaction, while INP measures the full time from interaction to the next visual update.

How long does it take for CWV improvements to show in Google Search Console?

Google uses a 28-day rolling window for CrUX data. This means improvements take up to 28 days to fully reflect in Search Console. Make your fixes, then wait a month before judging whether they worked.

What is a good Core Web Vitals score?

Google's "Good" thresholds: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1. These are measured at the 75th percentile of real user sessions, meaning 75% of your visitors need to hit these thresholds for the page to pass.

Can Core Web Vitals affect AI search visibility?

Indirectly, yes. AI search engines that retrieve from Google's index (like AI Overviews) draw from pages that rank well organically. CWV is one of the ranking signals that determines whether your page is in the retrieval pool. Poor CWV also affects Googlebot's ability to fully process JavaScript-heavy pages, which can reduce the amount of your content that is indexed and available for retrieval.

Further reading

• Core Web Vitals — web.dev
• Technical SEO for AI Search
• Crawlability: A Technical SEO Guide
• On-Page SEO: A Beginner's Guide