Suggest an edit

Improve this article

Refine the answer for “What does Core Web Vitals measure?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

These metrics directly affect **SEO ranking**, because they reflect:
how fast a page **loads**,
how **responsive** it is,
and how **stable** it looks while loading.

## Core Web Vitals - the 3 main metrics:

| Metric | What it measures | Ideal value |
| --- | --- | --- |
| **LCP (Largest Contentful Paint)** | How fast the user **sees the main content** (the largest element on screen) | ≤ **2.5 sec** |
| **INP (Interaction to Next Paint)** *(a new metric since 2024, replacing FID)* | How fast the page **reacts to user actions** (click, input, tap, etc.) | ≤ **200 ms** |
| **CLS (Cumulative Layout Shift)** | How **stable the layout** is - whether elements shift during loading | ≤ **0.1** |

## Let's break down each one

### 1. **LCP - Largest Contentful Paint**

**What it measures:**
The time it takes for **the largest element on the visible screen** (an image, a heading, a block, etc.) to become visible to the user.

> Essentially, this is a measure of **when the page has "formed" visually**.

**Good:** ≤ 2.5 s
**Needs improvement:** 2.5-4 s
**Poor:** > 4 s

**Typical causes of a poor LCP:**

- a slow server / TTFB;
- render-blocking CSS and JS;
- large images without optimization;
- no lazy loading;
- rendering after heavy JS computations.

**How to improve it:**

- Optimize images (`next/image`, WebP, sizes);
- Set up a CDN and caching;
- Use `preload` for fonts and critical resources;
- Remove render-blocking JS from `<head>` (add `defer`).

### 2. **INP - Interaction to Next Paint** *(the new key metric)*

**What it measures:**
How much time passes **from a user action** (click, input, tap)
to **the moment the interface visually responds**.

> That is: the user clicks a button → when the reaction appears (animation, text change, etc.).

**Good:** ≤ 200 ms
**Needs improvement:** 200-500 ms
**Poor:** > 500 ms

**Causes of a poor INP:**

- long JavaScript tasks (>50 ms);
- synchronous computations on the main thread;
- heavy React/Vue component renders;
- delays in event handlers.

**How to improve it:**

- Split heavy computations into chunks (`setTimeout`, `requestIdleCallback`);
- Use Web Workers for CPU-heavy work;
- Optimize React re-renders (memoization, `useCallback`);
- Reduce the bundle (code splitting, lazy loading).

### 3. **CLS - Cumulative Layout Shift**

**What it measures:**
How **much the page's elements shift** during loading.
(For example: a banner finishes loading and everything "jumps".)

> The more unexpected movement, the worse the UX.

**Good:** ≤ 0.1
**Needs improvement:** 0.1-0.25
**Poor:** > 0.25

**Causes of a poor CLS:**

- images without fixed dimensions;
- ad blocks, embedded video without a container;
- dynamic fonts without a fallback;
- lazy elements inserted without reserved space.

**How to improve it:**

- Always set `width` and `height` on `<img>`;
- Use `aspect-ratio` for videos and banners;
- Reserve layout space in advance;
- Load fonts with `font-display: swap`.

## Where to see these metrics

| Tool | What it shows |
| --- | --- |
| **Lighthouse / PageSpeed Insights** | A Core Web Vitals summary + recommendations |
| **Chrome DevTools → Performance** | The "Web Vitals" tab while recording a profile |
| **Google Search Console** | Real page data from the Chrome UX Report |
| **web-vitals.js** | A library for real-time measurement (on the site) |
| **Chrome UX Report (CrUX)** | Aggregated data from real users |

## Why this matters

Core Web Vitals:

- are part of **Google Page Experience** (an SEO ranking factor);
- directly affect **user retention**;
- show **how convenient and responsive the site is**.

> A fast site means a higher conversion rate, fewer bounces, and better search rankings.

## Summary

| Metric | What it checks | Good if |
| --- | --- | --- |
| **LCP** | When the main content loads | ≤ 2.5 s |
| **INP** | How fast the site reacts to actions | ≤ 200 ms |
| **CLS** | How stable everything is on screen | ≤ 0.1 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts680 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.