Core Web Vitals are three measurements Google uses to describe how a page feels to a real visitor: how quickly the main content appears, how quickly the page responds when someone interacts, and how stable the layout is while loading. They are part of Google's page experience signals, but their bigger value is practical. Pages that score well tend to feel better to use.
This article explains each metric without jargon, lists the thresholds Google publishes, and gives fixes you can act on, whether you work on the site yourself or brief a developer.
The three metrics and their thresholds
Google defines a page as having a good experience when it meets the targets below, measured on real user data at the 75th percentile. In other words, most of your visitors, not just the fastest ones, need to have a good experience.
- LCP (Largest Contentful Paint): how long the largest visible element, usually a hero image or main heading block, takes to render. Good is 2.5 seconds or less. Poor is over 4 seconds.
- INP (Interaction to Next Paint): how quickly the page visibly responds after taps, clicks and key presses. Good is 200 milliseconds or less. Poor is over 500 milliseconds. INP replaced First Input Delay as a Core Web Vital in 2024.
- CLS (Cumulative Layout Shift): how much visible content jumps around unexpectedly. Good is 0.1 or less. Poor is over 0.25.
You can see real-user results in the Core Web Vitals report in Google Search Console, and lab diagnostics in PageSpeed Insights or Lighthouse. Lab tests help you debug; field data tells you what visitors actually experience.
Fixing slow LCP: images first
On most business sites the LCP element is a large image. Start by identifying which element it is in PageSpeed Insights, then work through the causes below.
- Resize the image to the dimensions it is actually displayed at, rather than uploading a huge original.
- Use a modern format such as WebP or AVIF, with sensible compression.
- Do not lazy-load the hero image. Lazy loading is for images below the fold; the main image should load immediately.
- Mark the hero image as high priority so the browser fetches it early.
- Check server response time. A slow host delays everything that follows.
If your hero is a background image set in CSS or a slider, consider replacing it with a plain image element. Browsers discover those faster, and sliders often add scripting cost for little benefit.
Fonts and render-blocking resources
Fonts can delay text, which is often part of what visitors see first. Limit yourself to the font families and weights you truly use, since each one is another file to download. Host them on your own domain where practical, and use the font-display setting so text shows in a fallback font while the custom one loads.
Stylesheets and scripts placed in the page head can block rendering. Keep critical styles small, defer scripts that are not needed for the first view, and remove unused CSS left behind by themes and page builders. A web design built with performance in mind avoids many of these problems before they start.
Improving INP: tame your scripts
Poor INP almost always comes from too much JavaScript running on the main thread, so the browser cannot respond to a tap until it finishes other work. The usual suspects on marketing sites are chat widgets, heatmap tools, review badges, carousels and an overloaded tag setup.
- Audit every third-party script and remove any that no one uses.
- Load non-essential widgets after the page is interactive, or only on pages that need them.
- Keep your Google Tag Manager container tidy: delete old tags, avoid duplicate triggers, and review what fires on every click.
- Break long tasks in custom code into smaller pieces so the page can respond between them.
- Test interactions that matter most: menu toggles, form fields, add to cart buttons and filters.
Measuring the effect of tracking is part of good analytics setup. Tags exist to serve the business, so each one should earn its place.
Preventing layout shift
CLS is the most fixable of the three. Layout shifts happen when the browser does not know how much space something needs until after it loads.
- Set width and height attributes (or an aspect ratio) on every image and video.
- Reserve space for ads, embeds, cookie banners and promo bars instead of letting them push content down.
- Avoid inserting new content above existing content after load.
- Preload key fonts and use a fallback font with similar proportions to reduce text reflow.
- Animate with transforms rather than properties that change layout.
A sensible order of work
Do not try to fix everything at once. Check Search Console for groups of pages failing a metric, test one representative page from each group, fix the cause, then retest. Template-level fixes, such as the header, hero or product card, often improve many URLs together. If you want help prioritizing, our web development team can review a few key templates.
Key takeaways
- Google's published good thresholds are LCP 2.5 seconds or less, INP 200 milliseconds or less, and CLS 0.1 or less.
- Fix LCP by sizing, compressing and prioritizing the hero image, and never lazy-loading it.
- Most INP problems come from third-party scripts and bloated tag setups.
- Prevent layout shift by reserving space for images, embeds and banners.