Якщо ви коли-небудь відкривали PageSpeed Insights і бачили там три загадкові скорочення, LCP, INP, CLS, і думали “що це взагалі означає і чи варто мені про це турбуватись”, ця стаття для вас.
Коротка відповідь: так, варто. Google використовує ці три показники як прямий сигнал ранжування. Це означає, що два сайти з однаково якісним контентом можуть займати різні позиції в пошуку, і Core Web Vitals часто є тією різницею.
Кілька цифр для розуміння масштабу:
- 53% мобільних користувачів залишають сайт, якщо він завантажується довше 3 секунд (Google Research)
- 44% WordPress-сайтів не проходять Core Web Vitals на мобільних пристроях (corewebvitals.io, 2025)
- Погані показники CLS збільшують показник відмов на 20–25%, особливо в інтернет-магазинах
Хороша новина: розібратись у цих метриках і зрозуміти, що з ними робити, не так складно, як здається.
Навіщо Google придумав ці три числа
До 2021 року Google ранжував сайти переважно за якістю контенту та посиланнями. Але виявилось, що навіть ідеальна стаття не допомагає бізнесу, якщо сайт відкривається 8 секунд або кнопка “Замовити” стрибає в останній момент.
Google хоче показувати в пошуку сайти, якими зручно користуватись. Тому у 2021 році ці три метрики стали офіційними факторами ранжування.
Якщо говорити просто: Core Web Vitals, це оцінка враження від вашого сайту очима відвідувача. Не технічна складність серверів, не красота дизайну, саме те, що відчуває людина, коли заходить на ваш сайт.
Таблиця порогових значень
| Метрика | Добре ✅ | Потребує уваги 🟡 | Погано 🔴 |
|---|---|---|---|
| LCP | < 2.5 с | 2.5–4 с | > 4 с |
| INP | < 200 мс | 200–500 мс | > 500 мс |
| CLS | < 0.1 | 0.1–0.25 | > 0.25 |
Саме ці пороги Google використовує для оцінки. Якщо всі три показники в зеленій зоні, сайт вважається таким, що “проходить” Core Web Vitals.
LCP: перше враження про ваш сайт у секундах
LCP (Largest Contentful Paint), це час, за який на екрані з’являється основний контент сторінки: великий заголовок, фото товару, банер.
Уявіть: потенційний клієнт відкриває ваш сайт у ліфті з нестабільним 4G. Ліфт їде 4 поверхи. Якщо за цей час він бачить лише білий екран, він закриває вкладку.
Ціль: LCP менше 2.5 секунди.
Чому LCP буває поганим
Найчастіші причини поганого LCP на WordPress:
- Великі незоптимізовані зображення, PNG замість WebP, розмір 3–5 МБ замість 200–400 КБ
- Зображення без атрибуту
fetchpriority="high", браузер не знає, що грузити першим - Повільний хостинг, час відповіді сервера > 0.6 с сам по собі “з’їдає” LCP
- Рендер-блокуючі скрипти, JavaScript, який завантажується перед контентом
Як виправити LCP
Видаліть або відкладіть скрипти, які не потрібні при першому завантаженні
Конвертуйте головне зображення у формат WebP і стисніть до < 200 КБ
Переконайтесь, що хостинг знаходиться в Україні або країні вашої аудиторії
Увімкніть кешування сторінок (плагін WP Rocket або LiteSpeed Cache)
INP: чи реагує сайт коли клієнт щось натискає
INP (Interaction to Next Paint), це час між тим, як користувач натискає на щось (кнопку, посилання, форму), і моментом, коли браузер це відображає.
Реальний кейс: клієнт заповнює форму замовлення і натискає “Відправити”. Нічого не відбувається 2 секунди. Він натискає ще раз. І ще. В результаті, три дублікати заявки або скасована покупка.
Ціль: INP менше 200 мілісекунд.
Важливо: INP замінив старий показник FID у березні 2024 року. Якщо ви читали про Core Web Vitals раніше, орієнтуйтесь саме на INP.
Як виправити INP
Проблеми з INP майже завжди пов’язані з JavaScript:
Використовуйте оптимізатор JS, WP Rocket або Perfmatters вміють відкладати виконання скриптів до взаємодії користувача
Видаліть невикористовувані плагіни, кожен плагін WordPress додає свій JS, навіть там, де він не потрібен
Відкладіть сторонні скрипти (Google Tag Manager, чат-боти, пікселі реклами), вони не повинні блокувати взаємодію
CLS: чи «стрибає» сторінка поки ви читаєте
CLS (Cumulative Layout Shift), це оцінка стабільності сторінки. Чи стрибають елементи, поки ви читаєте?
Класична ситуація: ви читаєте статтю, вже майже дочитали до потрібного місця, і раптом завантажується банер зверху, весь текст “їде” вниз, і ви втрачаєте місце. Або ще гірше: ви натискаєте “Читати далі”, а в останню секунду там з’являється реклама, і ви випадково на неї клікаєте.
Ціль: CLS менше 0.1.
Три типові причини CLS на WordPress
- Зображення без заданих розмірів, браузер не знає, скільки місця зарезервувати, поки фото не завантажиться
- Шрифти без fallback, поки завантажується кастомний шрифт, текст відображається в іншому, і при заміні “стрибає”
- Динамічні банери і чат-боти, вставляються після завантаження основного контенту і зміщують все навколо
Як виправити CLS
Відкладіть завантаження чат-ботів (вони рідко потрібні при першому рендері)
Завжди вказуйте width і height для всіх зображень у HTML
Використовуйте font-display: swap або попередньо завантажуйте шрифти
Для банерів і реклами резервуйте місце заздалегідь через CSS
Як перевірити Core Web Vitals свого сайту: три способи
Спосіб 1: PageSpeed Insights (найшвидший)
- Зайдіть на pagespeed.web.dev
- Введіть URL свого сайту
- Зачекайте 30–60 секунд
- Подивіться секцію “Core Web Vitals Assessment”
Важливо: перевіряйте мобільну версію (вкладка “Mobile”), Google індексує сайти саме за мобільною версією.
Спосіб 2: Google Search Console (найточніший)
PageSpeed Insights показує лабораторні дані, тест з одного підключення. Google Search Console показує реальні дані від реальних відвідувачів вашого сайту за останні 28 днів.
Щоб знайти:
- Зайдіть в Google Search Console
- Розділ “Experience” → “Core Web Vitals”
- Там будуть реальні сторінки, розділені на “Добре”, “Потребує покращення”, “Погано”
Якщо у вас є доступ до Search Console, починайте саме звідти. Це реальна картина, а не синтетичний тест.
Спосіб 3: GTmetrix (детальна діагностика)
GTmetrix (gtmetrix.com) дає детальний звіт з waterfall-діаграмою: видно, які саме файли завантажуються довго і в якому порядку. Зручно для діагностики конкретних проблем.
Що означають результати: що терміново, а що може зачекати
Коли отримаєте результати, орієнтуйтесь так:
🔴 Червоне, терміново. Це означає, що сайт помітно повільний або нестабільний для реальних користувачів. Пошукові системи можуть віддавати перевагу конкурентам.
🟡 Жовте, заплануйте найближчі 1–2 місяці. Показники прийнятні, але є куди рости. Не критично, але варто виправити.
🟢 Зелене, добре. Підтримуйте цей рівень і стежте, щоб нові оновлення сайту не погіршили показники.
Що виправляти першим:
Якщо у вас обмежений час і ресурси, починайте з LCP і CLS. Вони найбільше впливають на першe враження і мають чіткі технічні рішення. INP складніший у виправленні і потребує більше технічних знань.
WordPress і Core Web Vitals: конкретні плагіни
WordPress, найпопулярніша CMS, але саме через це на ньому легко “накопичити” десятки плагінів і тем, які сповільнюють сайт. Лише 44% WordPress-сайтів успішно проходять Core Web Vitals на мобільних, проти 65% Shopify і 60% Wix.
Ось що реально допомагає:
Для LCP і загальної швидкості
- WP Rocket, найпопулярніший преміум-плагін оптимізації. Кешування, відкладання JS, оптимізація зображень. Вирішує більшість проблем “в один клік”.
- LiteSpeed Cache, безкоштовний і дуже потужний, але потребує хостинг на LiteSpeed-сервері.
- WP-Optimize, безкоштовна альтернатива для кешування та очищення бази даних.
Для зображень (LCP і загальний розмір)
- Imagify або ShortPixel, автоматично конвертують зображення у WebP і стискають без втрати якості.
- EWWW Image Optimizer, безкоштовний варіант з базовою оптимізацією.
Для CLS
- Perfmatters, дозволяє точково вимикати скрипти на конкретних сторінках, де вони не потрібні.
Якщо ваш сайт на WordPress і ви не впевнені, з чого почати, почніть з безкоштовного технічного аудиту, щоб зрозуміти, які саме метрики у вас в червоній зоні і що має найбільший вплив.
Детальніше про те, чому WordPress-сайти сповільнюються і як це виправити, читайте у статті 5 причин чому сайт завантажується повільно.
Часті питання про Core Web Vitals
Чи Core Web Vitals, єдиний фактор ранжування?
Скільки часу займе покращення показників?
Чи потрібно перевіряти кожну сторінку окремо?
Мій LCP 3.2 секунди, це катастрофа?
Чи впливає Core Web Vitals на мобільний і десктоп окремо?
Висновок
Core Web Vitals, це не страшна технічна абревіатура, а три зрозумілих питання про ваш сайт:
- LCP: Як швидко завантажується головний контент? (Ціль: < 2.5 с)
- INP: Чи реагує сайт на дії користувача? (Ціль: < 200 мс)
- CLS: Чи стабільна сторінка під час читання? (Ціль: < 0.1)
Почніть з перевірки в PageSpeed Insights або Google Search Console, це займе 5 хвилин. Якщо побачите червоні показники, це точки де ваш сайт втрачає клієнтів прямо зараз.
Потрібна допомога з інтерпретацією результатів або не знаєте, що виправляти першим? Запишіться на безкоштовний 15-хвилинний технічний огляд, разом розберемось, що найбільше впливає саме на вашому сайті.