How to Fix Core Web Vitals: LCP, INP, and CLS

Use field data to find the failing metric, then use lab diagnostics to trace the cause. This guide separates what Google documents from what performance tools can infer.

What are Core Web Vitals?

Core Web Vitals are three specific metrics Google uses to measure real-world user experience on your website. Google uses them among broader page-experience signals in its ranking systems:

LCP (Largest Contentful Paint): How fast the main content loads. Target: under 2.5 seconds.
INP (Interaction to Next Paint): How responsive your page is to user input. Target: under 200 milliseconds.
CLS (Cumulative Layout Shift): How much the page layout shifts while loading. Target: under 0.1.

Evaluate each metric at the 75th percentile of page visits, split by mobile and desktop. Passing all three supports a good page experience, but it does not guarantee a top Google ranking.

Check your Core Web Vitals score

Foglift's Technical Audit analyzes your site and shows your performance score alongside SEO, AI Readiness, security, and accessibility in one report.

Run Free Technical Audit

How to check your Core Web Vitals

Before you fix anything, measure where you stand. Here are the best tools:

Foglift Page Speed Checker: Free Core Web Vitals test powered by Google PageSpeed Insights with lab + field data. Read our page speed test guide.
Google PageSpeed Insights: Shows both lab data (simulated) and field data (real users) for your URL.
Google Search Console: Core Web Vitals report showing which pages pass or fail across your entire site.
Chrome DevTools: Performance tab for detailed waterfall analysis of individual page loads.

Lighthouse cannot measure INP in a simulated run because no real user interaction occurs. It reports Total Blocking Time (TBT) as a lab proxy that can help diagnose responsiveness problems.

How to fix Largest Contentful Paint (LCP)

LCP measures how quickly the largest visible element loads, usually a hero image, heading, or video poster. A slow LCP means users stare at a blank or incomplete page.

1. Optimize your largest image

The LCP element is often an image. Compress it, use modern formats (WebP or AVIF), and serve responsive sizes with srcset. A 2MB hero image should become a 100-200KB WebP. See our complete image optimization guide for format selection, compression techniques, and responsive image setup.

2. Preload the LCP resource

Add <link rel="preload" as="image" href="/hero.webp"> in your HTML head. This tells the browser to start downloading the image before it discovers it in the CSS or DOM.

3. Use fetchpriority="high"

Add fetchpriority="high" to your hero image tag. This tells the browser this image is more important than other resources.

4. Eliminate render-blocking resources

CSS and JavaScript in your <head> block rendering. Inline critical CSS, defer non-critical stylesheets, and add defer or async to script tags.

5. Improve server response time (TTFB)

A slow Time to First Byte consumes the 2.5-second LCP budget before the browser can render the main content. Investigate application work, caching, redirects, network latency, and CDN placement before choosing an infrastructure fix.

How to fix Interaction to Next Paint (INP)

INP replaced FID (First Input Delay) in 2024. It measures the responsiveness of your page across all interactions: clicks, taps, and key presses.

1. Break up long JavaScript tasks

Any JavaScript task longer than 50ms blocks the main thread. Split heavy operations into smaller chunks using requestIdleCallback() or scheduler.yield().

2. Reduce JavaScript bundle size

Less JavaScript means less parsing and execution. Use code splitting, tree shaking, and lazy loading for components that aren't immediately visible. Review your bundle with webpack-bundle-analyzer.

3. Defer non-critical work

Analytics, chat widgets, and social media embeds don't need to load before the user can interact. Defer them with setTimeout or load them on user interaction (scroll, click).

4. Reduce DOM complexity

Pages with 1,500+ DOM elements are slow to update. Simplify your HTML structure, virtualize long lists, and avoid deeply nested containers.

How to fix Cumulative Layout Shift (CLS)

CLS measures visual stability. When elements shift around while the page loads, users accidentally click wrong buttons and lose their reading position. It's frustrating.

1. Set dimensions on images and videos

Always include width and height attributes on images and videos. This lets the browser reserve the correct space before the media loads.

2. Reserve space for dynamic content

Ads, cookie banners, and notification bars push content around when they load. Use CSS min-height to reserve space or load them in fixed positions that don't shift the layout.

3. Use font-display: swap

Custom fonts can cause text to reflow when they load. Use font-display: swap and preload critical fonts. Better yet, use system fonts that require no download.

4. Avoid inserting content above existing content

Never dynamically insert banners, promotions, or notifications above the fold after the page has loaded. If you must show dynamic content, use fixed/sticky positioning or append it below the viewport.

Priority order: what to fix first

Start with the metric that fails in field data, then trace its largest contributing subpart. A practical order is:

Confirm field data: Use PageSpeed Insights, Search Console, CrUX, or your own real-user monitoring to identify the failing metric.
Trace the cause: Break LCP into timing subparts, inspect INP interactions, or identify the elements contributing to CLS.
Apply the narrow fix: Change the resource, script, layout rule, or server path responsible for the measured delay.
Recheck both data types: Use lab tools to catch regressions quickly, then wait for enough field data to evaluate real users.

Monitor your Core Web Vitals

Run the Free Technical Audit to see your current performance score, AI Readiness, and prioritized fix list. Paid plans add scheduled AI Visibility monitoring across the major engines.

Run Free Technical Audit

Common mistakes to avoid

Only testing lab data: Lab scores (Lighthouse) can differ from real-user data (CrUX). Check both.
Combining mobile and desktop: Device constraints and traffic mixes differ. Evaluate the 75th percentile for each segment.
Over-optimizing one metric: A perfect LCP means nothing if your CLS is terrible. Balance all three.
One-time fixes: New features, content, and third-party scripts can regress your scores. Monitor regularly.

Frequently Asked Questions

What are Core Web Vitals and why do they matter?

Core Web Vitals measure loading, responsiveness, and visual stability through LCP, INP, and CLS. Google recommends good results at the 75th percentile of visits. Its ranking systems use Core Web Vitals among broader page-experience signals, but passing the thresholds does not guarantee a top Google ranking.

Which Core Web Vital should I fix first?

Start with the metric that fails in field data for your users. Diagnose LCP through its resource and timing subparts, INP through slow interactions and long tasks, and CLS through unexpected layout-shift sources. A universal LCP-first order can waste work when INP or CLS is the actual failing metric.

How do I check Core Web Vitals?

Use PageSpeed Insights or Search Console for Chrome User Experience Report field data. Use Chrome DevTools for local analysis. Lighthouse can measure LCP and CLS in a simulated run, but Lighthouse cannot measure INP in a simulated run because there is no real user input. It reports Total Blocking Time (TBT) as a lab proxy for responsiveness.

Do Core Web Vitals affect AI search visibility?

No direct evidence shows that ChatGPT, Claude, or Perplexity uses Core Web Vitals as a citation factor. Google uses Core Web Vitals within broader page-experience signals for Search, but it does not document a separate Core Web Vitals rule for AI Overview citations. Measure AI mentions and citations independently from page performance.

Sources

web.dev, Web Vitals. Current LCP, INP, and CLS thresholds, the 75th-percentile rule, and field-versus-lab measurement boundaries.
Google Search Central, Understanding page experience in Google Search results. Explains that Core Web Vitals are used by ranking systems but do not guarantee top rankings.
web.dev, Core Web Vitals workflows with Google tools. Field-data diagnosis and the relationship between INP and Lighthouse TBT.

Bottom line

Core Web Vitals quantify loading, responsiveness, and visual stability. Use field data to choose the metric, lab diagnostics to locate the cause, and repeated measurements to prevent regressions. Better scores support page experience, but relevance and content quality still determine search success.

Run Free Technical Audit to see your performance score and get specific recommendations for your site.

Fundamentals: Learn about GEO (Generative Engine Optimization) and AEO (Answer Engine Optimization) (the two frameworks for optimizing your content for AI search engines).