Core Web Vitals: The Complete Guide

What Are Core Web Vitals

PageSpeed анализ are a set of metrics from Google that measure real user experience on a website. Since 2021, they've been a ranking factor in Google Search. Three main metrics assess loading speed, interactivity, and visual stability.

LCP — Largest Contentful Paint

LCP measures the loading time of the largest visible content element on the first screen. This could be an image, video, text block, or CSS background image.

Target Values

• Good: up to 2.5 seconds
• Needs improvement: 2.5 — 4.0 seconds
• Poor: over 4.0 seconds

How to Improve LCP

1. Optimize the LCP resource
   • Compress images, use WebP/AVIF
   • Set proper dimensions (width, height)
   • Preload: <link rel="preload" as="image" href="hero.webp">
   • Use fetchpriority="high" on the LCP element
2. Speed up server response
   • TTFB should be under 800ms
   • Use a CDN
   • Enable HTTP/2 or HTTP/3
   • Optimize server logic and database queries
3. Eliminate render-blocking resources
   • CSS: inline critical CSS, defer the rest
   • JS: defer or async attributes
   • Fonts: font-display: swap or optional
4. Don't use lazy loading for the LCP image — it slows down its loading

INP — Interaction to Next Paint

INP replaced FID in March 2024. It measures the delay between a user action (click, tap, key press) and the visual page update. INP accounts for all interactions during a visit, not just the first one.

Target Values

• Good: up to 200ms
• Needs improvement: 200 — 500ms
• Poor: over 500ms

How to Improve INP

1. Break up Long Tasks
   • Split JavaScript into smaller chunks
   • Use requestIdleCallback for non-urgent operations
   • Move heavy computations to Web Workers
2. Reduce JavaScript size
   • Code splitting and lazy loading modules
   • Tree shaking to remove unused code
   • Minify and compress (gzip/brotli)
3. Optimize the DOM
   • Avoid DOM trees larger than 1500 elements
   • Use virtualization for long lists
   • Minimize layout thrashing (DOM read-write cycles)
4. Debounce and throttle — for frequent events (scroll, resize, input)

CLS — Cumulative Layout Shift

CLS measures visual stability — how much page elements shift during loading. Each unexpected element shift contributes to the total CLS score.

Target Values

• Good: up to 0.1
• Needs improvement: 0.1 — 0.25
• Poor: over 0.25

How to Improve CLS

1. Always set dimensions for media

   <img src="photo.webp" width="800" height="600" alt="Photo">

   Or use CSS aspect-ratio: aspect-ratio: 16 / 9;

2. Reserve space for dynamic content
   • Ad blocks: set min-height
   • Embedded content: container with fixed dimensions
3. Avoid inserting content above the current scroll position
4. Fonts without FOUT
   • font-display: optional to prevent text shift
   • Font preloading: <link rel="preload" as="font" crossorigin>
5. Animations — use transform instead of layout-triggering properties (top, left, width, height)

How to Measure Core Web Vitals

Field Data

• Google Search Console — Core Web Vitals report across the entire site
• CrUX (Chrome User Experience Report) — real data from Chrome users
• PageSpeed Insights — field data + lab analysis

Lab Data

• Lighthouse — audit in Chrome DevTools
• WebPageTest — detailed analysis from different locations
• Enterno.io Speed Test — quick check of loading time and server response

Core Web Vitals and SEO

Core Web Vitals are one Google ranking factor but not the only one. Quality content, relevance, and link profile still matter more. However, all else being equal, a site with better CWV will gain an advantage.

Recommendations:

• First optimize content and technical SEO
• Then work on CWV — start with the most problematic pages
• Focus on LCP — it delivers the biggest impact
• Monitor changes in Search Console after optimization

Summary

Core Web Vitals are three metrics defining user experience quality: LCP (loading speed), INP (interactivity), CLS (visual stability). Optimize LCP first as it delivers the biggest impact for users and SEO. Use field data for prioritization and lab data for debugging.