Core Web Vitals: що це таке і чи справді треба про це турбуватися
Що таке Core Web Vitals простими словами
Уявіть, що ви заходите в магазин. Двері відчиняються повільно, полиці трусяться поки ви йдете, і кнопка на касі реагує через секунду після натискання. Неприємно? Саме таке Google вимірює на вашому сайті.
Core Web Vitals — це три числові показники, якими Google оцінює якість досвіду користувача на сайті. Не дизайн, не текст, а саме технічна комфортність: чи швидко завантажується, чи не стрибає вміст, чи відразу реагує на кліки.
Google запровадив ці метрики у 2021 році і офіційно включив їх у фактори ранжування. Але є нюанс — і про нього далі.
Три метрики: LCP, CLS, INP
LCP — Largest Contentful Paint
Що вимірює: час до появи найбільшого видимого елемента на екрані. Зазвичай це головне зображення або великий заголовок.
Простіше: коли людина перестає дивитися на білий екран і бачить сторінку.
| Оцінка | Значення |
|---|---|
| Добре | до 2.5 секунди |
| Потребує покращення | 2.5 – 4 секунди |
| Погано | понад 4 секунди |
CLS — Cumulative Layout Shift
Що вимірює: наскільки елементи зміщуються під час завантаження. Кнопка, яка стрибає вниз коли з'являється реклама — це і є CLS.
Простіше: ви натискаєте «Купити», а кнопка зміщується і ви тиснете «Скасувати». Знайома ситуація.
| Оцінка | Значення |
|---|---|
| Добре | до 0.1 |
| Потребує покращення | 0.1 – 0.25 |
| Погано | понад 0.25 |
INP — Interaction to Next Paint
Що вимірює: як швидко сторінка реагує на дії користувача — кліки, натискання клавіш, тап на телефоні.
Порада: INP замінив FID (First Input Delay) у березні 2024 року. Якщо ви читали старі статті де згадується FID — це вже не актуально.
| Оцінка | Значення |
|---|---|
| Добре | до 200 мс |
| Потребує покращення | 200 – 500 мс |
| Погано | понад 500 мс |
Хочете знати що гальмує ваш сайт?
SEO-аудит — знайду технічні проблеми і дам план виправлень
Чи справді це впливає на Google?
Так, але не так драматично, як деякі SEO-спеціалісти малюють.
Google підтвердив: Core Web Vitals — один із сотень факторів ранжування. Якщо ваш контент набагато кращий за конкурентів, погані Web Vitals вас не вб'ють. Але якщо все інше рівне — вони стають важливим диференціатором.
На практиці це виглядає так: сайти зі стабільно зеленими показниками отримують незначний буст у видачі. Сайти з дуже поганими показниками (особливо на мобільних) можуть помітно просідати.
Важливо: Google використовує реальні дані користувачів (Chrome User Experience Report), а не лабораторні тести PageSpeed. Тобто якщо ваш сайт в реальності швидкий, але PageSpeed каже 60 — це не катастрофа. Детальніше про це в статті про PageSpeed Insights і міф оцінки 100/100.
Загальне правило: прагніть до зелених показників, але не ламайте сайт заради абстрактних балів.
Як перевірити свій сайт
Є два способи дізнатися свої показники:
1. Google PageSpeed Insights
Відкрийте pagespeed.web.dev, введіть URL — отримаєте дані по кожній метриці. Зверніть увагу на розділ «Дані про справжніх користувачів» (Field Data) — це важливіше за «Діагностику» (Lab Data).
2. Google Search Console
В розділі «Зручність для користувачів» знайдіть «Основні показники веб-сторінок». Тут видно агреговані дані по всіх сторінках сайту — відразу помітно де проблема. Якщо ще не під'єднали Search Console — читайте що таке Google Search Console і як ним користуватися.
3. Chrome DevTools
Для розробників: у вкладці Lighthouse є повний звіт з рекомендаціями. Запускайте в режимі інкогніто щоб розширення не впливали на результати.
Як покращити показники
Проблеми з LCP (сайт довго завантажується)
Найчастіші причини:
- Важке головне зображення — стиснуйте до WebP, вкажіть розміри через width/height
- Повільний хостинг — перевірте TTFB (Time to First Byte), має бути до 600 мс
- Шрифти завантажуються блокуючи рендер — додайте rel="preload" для шрифтів
Проблеми з CLS (елементи стрибають)
Найчастіші причини:
- Зображення без вказаних розмірів — завжди додавайте width і height атрибути
- Реклама або банери що з'являються після завантаження — резервуйте місце заздалегідь
- Шрифти що замінюють одне одного — використовуйте font-display: optional
Проблеми з INP (повільна реакція на дії)
Найчастіші причини:
- Важкий JavaScript що блокує головний потік браузера
- Забагато сторонніх скриптів (чати, аналітика, ремаркетинг)
- На WordPress — надлишкові плагіни з важкими скриптами
Часті запитання
Це три показники від Google: LCP (як швидко завантажується основний контент), CLS (чи не стрибають елементи на сторінці), INP (як швидко сторінка реагує на кліки). Google використовує їх як один з факторів ранжування з 2021 року.
Так, але це один з багатьох факторів. Хороший контент і посилання важливіші. Але якщо з конкурентом все рівно — зелені Web Vitals дають перевагу. Критично погані показники (особливо на мобільних) можуть помітно знижувати позиції.
Найзручніше — Google Search Console, розділ "Основні показники веб-сторінок". Там видно реальні дані по всіх сторінках. Також можна перевіряти окремі URL через PageSpeed Insights (pagespeed.web.dev).
INP (Interaction to Next Paint) замінив FID у березні 2024 року. FID вимірював тільки першу взаємодію, INP — всі взаємодії протягом перебування на сторінці. Норма: до 200 мс — добре, 200-500 мс — потребує покращення, понад 500 мс — погано.
Залежить від розділу. Якщо "Дані про справжніх користувачів" (Field Data) зелені — все добре. PageSpeed Insights тестує в штучних умовах, а Google ранжує за реальними даними Chrome. Детальніше — в статті про міф оцінки 100/100.
Висновок
Core Web Vitals — не маркетинговий міф і не привід для паніки. Це конкретні технічні метрики, які вимірюють реальний досвід ваших відвідувачів. Хороші показники = люди не втікають з сайту в перші секунди.
Починайте з перевірки через Google Search Console — вона покаже де реальні проблеми. Якщо знайдете червоні сторінки — це сигнал для технічного аудиту.
Мета — не оцінка 100, а зелені показники у Field Data. Цього достатньо.