On this page8 sections
Core Web Vitals are three measurements of how a page feels to real visitors: Largest Contentful Paint (LCP) measures how fast the main content appears, Interaction to Next Paint (INP) measures how quickly the page responds when someone taps or clicks, and Cumulative Layout Shift (CLS) measures how much the layout jumps around while loading. For most business websites, the fixes that move them are the same few: serve a smaller, prioritised hero image, cut and defer third-party scripts, and reserve space for anything that loads late.
INP replaced the older First Input Delay metric earlier this year, so if you last looked at your scores before then, check them again. Below is what each metric means, how to read your data, and what to change first.
What are the three Core Web Vitals and their targets?
Google publishes a "good" threshold for each, measured at the 75th percentile of real visits:
- LCP: 2.5 seconds or less. The time until the largest visible element, usually a hero image or a headline block, finishes rendering.
- INP: 200 milliseconds or less. The delay between a user interaction and the next visual update, taken across the visit.
- CLS: 0.1 or less. A score for how much visible content moves unexpectedly.
The 75th percentile matters. A page that is fast on your office connection can still fail if a quarter of your visitors are on older phones or slow mobile networks.
Where do you find your real numbers?
There are two kinds of data, and they answer different questions.
- Field data comes from real Chrome users visiting your site. It is what counts for search, and you see it in Search Console's Core Web Vitals report and at the top of PageSpeed Insights when your site has enough traffic.
- Lab data comes from a single simulated load, such as the Lighthouse score in PageSpeed Insights or your browser's developer tools. It is useful for diagnosing problems and checking fixes, but a perfect lab score does not guarantee good field results.
Start with Search Console. It groups pages with similar problems, so you can see whether the issue is one template, such as every blog post or every product page, rather than hundreds of separate pages.
What actually improves LCP?
LCP is usually limited by one element, so first find out which. PageSpeed Insights and the browser's performance panel both name it. On business sites it is most often a large hero image or slider.
Fixes, roughly in order of impact:
- Make the image smaller. Serve it at the size it is displayed, in a modern format such as WebP or AVIF, with responsive
srcsetsizes for phones. - Load it early. Do not lazy-load the LCP image. Add
fetchpriority="high"to it, or preload it, so the browser fetches it first. - Remove sliders and video backgrounds above the fold. They add weight and often delay the main content.
- Speed up the server response. Use caching, a CDN, and hosting that answers quickly. A slow first byte delays everything after it.
- Reduce render-blocking CSS and fonts. Inline the small amount of CSS the first screen needs and use
font-display: swapfor web fonts.
What actually improves INP?
INP measures responsiveness, and the usual cause of a poor score is too much JavaScript running on the main thread. When the browser is busy executing scripts, it cannot respond to a tap.
On business websites the heaviest scripts are often not your own:
- Chat widgets, heatmap tools and multiple analytics tags
- Tag managers loading dozens of marketing pixels
- Page builders and theme frameworks that ship code for every possible feature
Fixes:
- Audit third-party scripts and remove any nobody uses. Many sites carry tags for tools that were cancelled years ago.
- Defer what remains, so it loads after the page is interactive. Load the chat widget only when someone clicks the chat button.
- Break up long tasks in your own code so the browser can respond between them.
- Keep event handlers light. A click that triggers a large re-render or a synchronous network call will feel slow.
What actually improves CLS?
Layout shift happens when something appears or changes size after the content around it has already been drawn. The fixes are mostly about reserving space:
- Set width and height, or an aspect ratio, on every image and video so the browser holds the space before the file arrives.
- Reserve space for banners, cookie notices and ads, or show them as overlays that do not push content down.
- Avoid inserting content above existing content, such as a promo bar that appears a second after load.
- Load web fonts carefully. A fallback font with very different metrics causes text to reflow when the real font arrives. Matching fallback sizes reduces this.
How much do Core Web Vitals matter for search?
They are one of many signals Google uses, and relevance and content quality matter far more. A slow page with exactly the answer someone needs can still rank above a fast page that does not.
The stronger reason to care is your visitors. Slow loading and jumping layouts are a common reason people leave a page before acting on it, which is why speed sits on our landing page conversion checklist.
What order should you work in?
- Open Search Console and find which page templates fail, and on which metric.
- Run PageSpeed Insights on one example of each failing template.
- Fix the LCP element on that template: size, format and priority.
- Remove unused third-party scripts and defer the rest.
- Add dimensions to images and reserve space for late content.
- Deploy, then wait. Field data is a rolling 28-day window, so improvements take weeks to show fully.
- Watch for regressions each time a new plugin, tag or widget is added.
That last step is where most sites slip. Scores rarely get worse because of one big change. They drift as small additions pile up, so make a performance check part of adding anything new to the site.
Working with Syntora Ai
Syntora Ai builds business websites with performance treated as part of the design from the first sketch, and we fix slow sites by finding the specific element or script responsible. If your Core Web Vitals are failing and you want to know why, write to hello@syntorahq.ai or see our web design and development practice.