What does Core Web Vitals measure?

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:

#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

#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