What Are Core Web Vitals? LCP, INP and CLS

01What Are Core Web Vitals?

A page being "fast" cannot be described with a single number. What matters to a visitor is how quickly the content appears, how fast the page reacts when they tap a button, and whether the content jumps around while they read. Core Web Vitals are made up of metrics that measure each of these three experiences separately.

Google uses these metrics as part of its page experience signals. They do not determine rankings on their own, but between two pages with equally strong content, the one with the better experience can gain an edge. Their real impact is on user behavior: on fast, stable pages visitors stay longer and convert more.

Metrics evolve over time. For example, FID, the metric once used to measure interactivity, has been replaced by INP, which reflects all interactions more accurately. That is why it is a good habit to follow the current definitions in the official web.dev documentation.

02Thresholds Table

For each metric, Google defines three ranges: good, needs improvement and poor. For a page to be considered "good", the value must fall in the good range for at least 75 percent of visits. Mobile and desktop are evaluated separately.

03What Is LCP?

LCP (Largest Contentful Paint) is the time it takes for the largest content element visible on screen (usually the hero image, a video poster or a large heading block) to load and render as the page opens. It is the metric closest to the visitor's feeling that "the page has loaded".

What makes LCP worse

• Slow server response (long TTFB)
• A hero image that is large, uncompressed or in an outdated format
• A hero image set to lazy loading
• CSS and JavaScript files that block rendering
• Main content that is created later with JavaScript

How to improve LCP

Serve the main image in WebP or AVIF at the right size, remove lazy loading from it and, if needed, load it with high priority. Shorten server response time with caching and a CDN, and defer non-critical scripts.

<img src="/img/hero.webp" alt="Main image" width="1200" height="630" fetchpriority="high">

04What Is INP?

INP (Interaction to Next Paint) measures how quickly a page visually responds to the clicks, taps and keyboard interactions a user makes throughout the visit. One of the slowest interactions observed during the visit is reported, so it is not a single fast click that is evaluated but the overall quality of responsiveness.

If nothing seems to happen for a moment after you tap a menu button and then the menu suddenly opens, that delay shows up in INP. The problem is usually JavaScript code that keeps the browser's main thread busy for a long time.

How to improve INP

• Break long-running JavaScript tasks into smaller pieces.
• Remove unused and unnecessary scripts and reduce third-party code.
• Defer heavy work that follows an interaction (such as sending analytics).
• Avoid a very large and complex page structure (DOM).
• Give the user immediate visual feedback and do the heavy work afterward.

05What Is CLS?

CLS (Cumulative Layout Shift) measures how much page content moves unexpectedly. Text jumping down while you read because an ad loaded late at the top, or a button moving just as you are about to click it, are typical examples of a high CLS.

CLS is not a duration but a unitless score. The size of the shifting element and the distance it moves are both taken into account. Changes caused by the user's own action (for example, opening an accordion) are not included in the score.

How to improve CLS

• Give all images and videos a width and height or an aspect ratio.
• Reserve space in advance for ads, maps and embedded content.
• Do not insert banners or notices above existing content after the page has loaded.
• Load web fonts with font-display: swap and keep the metrics of the fallback font close.
• Use the transform property instead of position in animations.

06Field Data vs. Lab Data

The Core Web Vitals assessment is based on field data collected from real Chrome users. This data is provided through the Chrome User Experience Report (CrUX) as an average of the last 28 days. Field data may not appear for pages without enough traffic.

Lab data, on the other hand, is the result tools such as Lighthouse produce by running a single test in a controlled environment. It is very valuable for finding problems and trying a fix right away, but it does not fully reflect the variety of devices and connections of real users. Metrics based on real interaction, such as INP, cannot be measured directly in the lab; Total Blocking Time (TBT) is used instead as an approximate indicator.

import { onLCP, onINP, onCLS } from 'web-vitals';

function gonder(metrik) {
  console.log(metrik.name, metrik.value);
  // Here you can send the value to your own analytics tool
}

onLCP(gonder);
onINP(gonder);
onCLS(gonder);

07A Roadmap for Improvement

When fixing Core Web Vitals issues, following a systematic order instead of making random changes keeps your effort from going to waste.

1. Open the Core Web Vitals report in Search Console and identify the groups of problem pages.
2. Test a sample page from each group in PageSpeed Insights and note which metric is weak.
3. Apply the Lighthouse recommendations, starting with the one that will deliver the biggest gain.
4. Publish the change and start the fix validation process in Search Console.
5. Wait a few weeks for the field data to update, then compare the results.

08Core Web Vitals and Your SEO Strategy

Core Web Vitals do not replace SEO; they support it. Original, trustworthy content that satisfies search intent is still the most decisive factor. But between pages of similar content quality, the experience gap can stand out, and a good experience raises the likelihood that a visitor you have won will convert.

The most efficient approach is to account for performance at the design stage. When lightweight components, the right visual layout and a clean code structure are built in from the start, there is less to fix later. We apply this approach in our SEO-friendly web design and mobile-responsive design processes; you can find the design-stage checklist in our SEO-friendly web design article.

We covered actionable speed-up steps in our how to increase site speed guide, and the routine for regular monitoring in our website maintenance article. To report measurements together with search performance on a regular basis, you can get support from our SEO and analytics service.