Core Web Vitals are the three performance metrics Google uses to measure real-world user experience on your website. Since becoming a confirmed ranking factor, optimizing these metrics has gone from a nice-to-have to a necessity for anyone serious about organic traffic. In this guide, we break down exactly what each metric measures, what causes poor scores, and how to fix them with actionable steps you can implement today.
Whether you run a blog, an e-commerce store, or a SaaS product, the principles are universal. Fast-loading, responsive, visually stable pages rank higher, convert better, and keep visitors engaged longer. Let us walk you through the entire optimization process.
Understanding the Three Core Web Vitals
Google evaluates page experience through three specific metrics. Each measures a different dimension of how users perceive your site.
| Metric | What It Measures | Good | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Loading speed — when the main content becomes visible | ≤ 2.5s | > 4.0s |
| INP (Interaction to Next Paint) | Responsiveness — delay between user action and visual response | ≤ 200ms | > 500ms |
| CLS (Cumulative Layout Shift) | Visual stability — how much the page layout shifts unexpectedly | ≤ 0.1 | > 0.25 |
You can check your current scores instantly using SiteWorthIt's free Speed Checker, which pulls data directly from Google PageSpeed Insights and presents it in an easy-to-read format.
How to Fix Largest Contentful Paint (LCP)
LCP measures how quickly the largest visible element loads — typically a hero image, heading block, or video thumbnail. When your LCP is slow, visitors stare at a blank or half-rendered page, which dramatically increases bounce rates.
Common LCP Problems and Fixes
Slow server response time. If your Time to First Byte (TTFB) exceeds 600ms, everything downstream is delayed. Switch to a faster hosting provider, enable server-side caching, or use a CDN like Cloudflare or Fastly to serve assets from edge locations closest to your visitors.
Unoptimized images. Hero images are the LCP element on most pages. Convert images to modern formats like WebP or AVIF, which are 25 to 50 percent smaller than JPEG at the same quality. Use responsive srcset attributes so mobile devices do not download desktop-sized images. Add fetchpriority="high" to your LCP image so the browser prioritizes loading it.
Render-blocking resources. JavaScript and CSS files in the <head> block rendering until they finish downloading. Defer non-critical JavaScript with the defer attribute, inline critical CSS directly in your HTML, and load the rest asynchronously. This alone can shave one to two seconds off LCP.
Third-party scripts. Analytics tags, chat widgets, and ad scripts compete for bandwidth. Audit every third-party resource and remove anything not essential. For those that remain, load them after the main content with async or delay them until user interaction.
How to Fix Interaction to Next Paint (INP)
INP replaced First Input Delay (FID) in March 2024 and measures responsiveness across the entire page lifecycle, not just the first click. A poor INP score means your page feels sluggish when users click buttons, open menus, or type in form fields.
Common INP Problems and Fixes
Long JavaScript tasks. The browser's main thread can only do one thing at a time. When a script runs for more than 50 milliseconds, user interactions queue up and the page feels frozen. Break long tasks into smaller chunks using requestIdleCallback or scheduler.yield(). This lets the browser process user input between script executions.
Excessive DOM size. Pages with more than 1,500 DOM elements force the browser to recalculate styles and layouts more frequently. Simplify your HTML structure, remove unnecessary wrapper elements, and virtualize long lists so only visible items are in the DOM.
Hydration cost in frameworks. React, Vue, and Angular applications often have poor INP because hydration replays the entire component tree on load. Use selective hydration, server components, or islands architecture (as in Astro) to reduce client-side JavaScript execution.
Inefficient event handlers. Event listeners that trigger heavy computations (layout recalculations, DOM mutations) block responsiveness. Debounce scroll and resize handlers, use CSS transforms instead of layout properties for animations, and move heavy computation to Web Workers.
How to Fix Cumulative Layout Shift (CLS)
CLS measures how much visible content shifts around as the page loads. Nothing frustrates users more than clicking a button only to have the page jump, causing them to tap the wrong element. High CLS also signals to Google that your page provides a poor experience.
Common CLS Problems and Fixes
Images and videos without dimensions. When browsers do not know the size of a media element before it loads, they allocate zero space and then reflow the layout once the asset arrives. Always set explicit width and height attributes on images and videos, or use the CSS aspect-ratio property.
Dynamically injected content. Ad units, cookie banners, and notification bars that push content down after load are major CLS offenders. Reserve space for ad slots using CSS min-height placeholders. For banners, use overlay positioning instead of pushing content down.
Web fonts causing text shifts. When a custom font loads and replaces the fallback font, text reflows and shifts surrounding elements. Use font-display: swap with a size-matched fallback font, or preload critical fonts with <link rel="preload"> to minimize the flash.
Quick CLS Checklist
- Set width and height on all images and videos
- Reserve space for ads and embeds with min-height
- Preload web fonts and use font-display: swap
- Avoid inserting content above existing content
- Use CSS transform for animations instead of top/left properties
- Test on slow 3G throttling in Chrome DevTools
Tools to Measure Core Web Vitals
You need both lab data (simulated tests) and field data (real-user measurements) for a complete picture.
SiteWorthIt Speed Checker
Free, instant speed test powered by Google PageSpeed Insights. Shows performance score, Core Web Vitals, and optimization opportunities. Try it free.
Google Search Console
The Core Web Vitals report shows real-user field data grouped by good, needs improvement, and poor URLs across your entire site.
Chrome DevTools Lighthouse
Run lab audits directly in your browser. Lighthouse simulates a mid-tier mobile device on a slow 4G connection for consistent benchmarking.
web-vitals JavaScript Library
Google's open-source library lets you collect real-user Core Web Vitals data and send it to your own analytics pipeline for ongoing monitoring.
Priority Order: What to Fix First
Not all fixes deliver equal impact. Focus your efforts in this order for maximum ranking improvement:
- Fix LCP first. Loading speed has the most noticeable impact on both user experience and bounce rate. Optimize your LCP element, reduce server response time, and eliminate render-blocking resources.
- Fix CLS second. Layout shifts are relatively easy to fix (add image dimensions, reserve ad space) and the improvements are immediate.
- Fix INP third. Responsiveness issues often require deeper JavaScript refactoring, but the payoff is significant for interactive pages like e-commerce product pages and dashboards.
Field Data vs Lab Data
Google uses field data (real Chrome users from the CrUX report) for ranking, not lab scores. Your Lighthouse score might be 95 while real users on slow networks experience poor Core Web Vitals. Always check the field data section in PageSpeed Insights or Google Search Console for the metrics that actually impact your rankings.
Frequently Asked Questions
What are Core Web Vitals?
Core Web Vitals are three metrics Google uses to measure real-world user experience: Largest Contentful Paint (LCP) for loading speed, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. They are part of Google's Page Experience ranking signal.
Do Core Web Vitals affect Google rankings?
Yes. Core Web Vitals are a confirmed Google ranking factor. Sites that pass all three thresholds get a ranking boost compared to similar pages with poor scores. However, content relevance still outweighs page experience — a slow page with the best content can still rank above a fast page with thin content.
What is a good LCP score?
A good LCP score is 2.5 seconds or less. Between 2.5 and 4.0 seconds needs improvement. Over 4.0 seconds is considered poor. Most sites can achieve good LCP by optimizing images, using a CDN, and eliminating render-blocking resources.
How do I check my Core Web Vitals?
Use SiteWorthIt's free Speed Checker for instant results powered by Google PageSpeed Insights. You can also use Chrome DevTools Lighthouse, Google Search Console's Core Web Vitals report, or the web-vitals JavaScript library for real-user monitoring.