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

Що таке Core Web Vitals

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

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

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 — зменшує TTFB.
• Прибрати блокуючі ресурси — перенесіть некритичні JS та CSS в defer/async.
• Server-Side Rendering — SSR різко покращує LCP для SPA.

CLS — Cumulative Layout Shift

CLS вимірює сумарне зміщення елементів сторінки під час завантаження.

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

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

• Вказуйте розміри зображень — завжди додавайте width і height.
• Резервуйте місце для реклами — задайте фіксовані розміри рекламним блокам.
• Не вставляйте контент над існуючим — банери та cookie-повідомлення повинні бути внизу.
• Preload шрифти — FOUT викликає зміщення.

INP — Interaction to Next Paint

INP замінив FID у березні 2024 року. Він вимірює затримку між взаємодією користувача та оновленням екрана.

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

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

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

• Розбийте довгі задачі — будь-який JS > 50мс блокує браузер.
• Зменшіть розмір JS-бандлу — code splitting і tree shaking.
• Уникайте синхронних операцій в обробниках подій.
• Перевірте сторонні скрипти — чат-боти та аналітика часто викликають поганий INP.

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

Польові дані

• Google Search Console → "Взаємодія зі сторінкою".
• PageSpeed Insights — поєднує польові та лабораторні дані.
• CrUX Dashboard в Looker Studio.

Лабораторні дані

• Lighthouse у Chrome DevTools.
• WebPageTest — детальне тестування.

Вплив CWV на SEO

Google підтвердив: CWV є фактором ранжування, але контент все ще важливіший.

Практично: якщо ваш сайт у зеленій зоні, CWV не заважає зростанню.