Core Web Vitals 2025: що важливо знати

Що таке Core Web Vitals

Core Web Vitals (CWV) — підмножина сигналів Page Experience, які Google використовує при ранжуванні. На відміну від лабораторних тестів Lighthouse, CWV вимірюються на реальних користувачах через Chrome User Experience Report (CrUX).

Три поточні метрики CWV у 2025 році:

LCP — Largest Contentful Paint

LCP вимірює час до відображення найбільшого видимого елемента сторінки — зазвичай це hero-зображення, велике фото або заголовок H1.

Значення	Оцінка
≤ 2.5 секунди	✅ Добре
2.5 – 4.0 секунди	⚠️ Потребує покращення
> 4.0 секунди	❌ Погано

Як покращити LCP

• Оптимізуйте зображення — конвертуйте у WebP або AVIF, додайте атрибут loading="eager" для hero-зображення
• Preload LCP-елемент — додайте <link rel="preload" as="image"> для головного зображення
• Використовуйте CDN — зменшує Time to First Byte (TTFB), який напряму впливає на LCP
• Прибрати блокуючі ресурси — перенесіть некритичні JS та CSS в defer/async
• Server-Side Rendering — для React/Vue/Angular сайтів SSR різко покращує LCP

CLS — Cumulative Layout Shift

CLS вимірює сумарне зміщення елементів сторінки під час завантаження. Якщо кнопка «стрибає» під час читання тексту — це поганий CLS. Зазвичай це означає, що користувач натискає не те що хотів.

Значення	Оцінка
≤ 0.1	✅ Добре
0.1 – 0.25	⚠️ Потребує покращення
> 0.25	❌ Погано

Як покращити CLS

• Вказуйте розміри зображень — завжди додавайте width і height атрибути в <img>
• Резервуйте місце для реклами — задайте фіксовані розміри рекламним блокам заздалегідь
• Не вставляйте контент над існуючим — банери та cookie-повідомлення знизу не впливають на CLS
• Preload шрифти — FOUT (flash of unstyled text) спричиняє зміщення; використовуйте font-display: optional або swap

INP — Interaction to Next Paint

INP замінив FID (First Input Delay) у березні 2024 року. Він вимірює затримку між будь-якою взаємодією користувача (клік, тап, натискання клавіші) та наступним оновленням екрана.

На відміну від FID, який вимірював лише першу взаємодію, INP відстежує всі взаємодії протягом сесії і бере найгірше значення.

Значення	Оцінка
≤ 200 мс	✅ Добре
200 – 500 мс	⚠️ Потребує покращення
> 500 мс	❌ Погано

Як покращити INP

• Розбийте довгі задачі — будь-який JS що виконується понад 50мс блокує браузер; використовуйте setTimeout або scheduler.yield()
• Зменшіть розмір JS-бандлу — code splitting і tree shaking зменшують час парсингу
• Уникайте синхронних операцій в обробниках подій — важкі обчислення виносьте у Web Workers
• Перевірте сторонні скрипти — чат-боти, аналітика, A/B тестери часто є головними винуватцями поганого INP

Як виміряти Core Web Vitals

Реальні дані (Field Data)

• Google Search Console → «Взаємодія зі сторінкою» — показує CWV на основі реальних користувачів Chrome
• PageSpeed Insights (pagespeed.web.dev) — поєднує Field Data і Lab Data
• CrUX Dashboard в Looker Studio — деталізована аналітика по сегментах

Лабораторні дані (Lab Data)

• Lighthouse у Chrome DevTools — F12 → Lighthouse → Generate report
• WebPageTest — детальний waterfall, тестування з різних локацій

Вплив CWV на SEO

Google підтвердив: Core Web Vitals є фактором ранжування в межах Page Experience signal. Але масштаб впливу менший ніж у контентних факторів — при рівному контенті перемагає сторінка з кращим CWV.

Практично: якщо ваш сайт в зеленій зоні по всіх трьох метриках — CWV не заважає зростанню. Якщо в червоній — виправлення дасть помітний приріст у конкурентних нішах.