Core Web Vitals: що таке LCP, INP, CLS і як перевірити

Core Web Vitals — це три метрики Google, які описують, яким сайт здається справжньому відвідувачу: як швидко з’являється основний вміст (LCP), як швидко сторінка реагує на натискання (INP) і чи не «стрибає» макет під час завантаження (CLS). Сторінка проходить оцінку, коли всі три показники «добрі» щонайменше для 75% відвідувань. Нижче — що означає кожна метрика, точні пороги і як перевірити свій сайт за хвилину.

Хочете одразу побачити свої цифри? Запустіть безкоштовний аудит сайту: він показує Core Web Vitals справжніх користувачів Chrome і лабораторний тест для мобільних і десктопа в одному звіті.

Три метрики та їхні пороги

Метрика	Що вимірює	Добре	Потребує покращення	Погано
LCP, Largest Contentful Paint	Коли показано найбільше зображення чи блок тексту на першому екрані	до 2,5 с	2,5–4 с	понад 4 с
INP, Interaction to Next Paint	Скільки часу сторінка відповідає на дотики, кліки й натискання клавіш	до 200 мс	200–500 мс	понад 500 мс
CLS, Cumulative Layout Shift	Наскільки видимий вміст несподівано зсувається під час роботи зі сторінкою	до 0,1	0,1–0,25	понад 0,25

Google оцінює кожну метрику за 75-м процентилем завантажень сторінки за останні 28 днів, окремо для мобільних і десктопа. Простіше: якщо троє відвідувачів із чотирьох отримують добрий LCP, сторінка проходить за LCP. INP замінив стару метрику FID у березні 2024 року, тож інструкції, де досі пишуть про FID, застаріли.

Лабораторні та польові дані — не одне й те саме

Швидкість вимірюють двома способами, і найбільше плутанини виникає, коли їх змішують.

Польові дані — те, що за останні 28 днів побачили справжні користувачі Chrome на вашому сайті. Google збирає їх у Chrome UX Report (CrUX). Саме їх пошук використовує для оцінки зручності сторінки, і саме з них складається оцінка Core Web Vitals.
Лабораторні дані — один тест Lighthouse у контрольованих умовах: імітація телефона середнього класу на повільному з’єднанні. Він чудово знаходить причини, але це один запуск, тож бал може змінюватися на кілька пунктів між тестами.

У малих і нових сайтів польових даних часто немає зовсім: Chrome публікує цифри лише після достатньої кількості відвідувань. Тоді ви бачите тільки лабораторні дані, і це нормально. Найближча заміна INP у лабораторії — Total Blocking Time (TBT).

Як перевірити Core Web Vitals

Повний аудит в одному місці. Наш аудит сайту запускає Google PageSpeed для мобільних і десктопа, показує польові дані, якщо вони є, і перелічує конкретні можливості покращення з оцінкою виграшу.
PageSpeed Insights. Інструмент Google на pagespeed.web.dev показує ті самі дані CrUX і запуск Lighthouse для однієї адреси.
Search Console. Звіт «Основні веб-показники» групує ваші сторінки на добрі, такі, що потребують покращення, і погані — за польовими даними. Коли є трафік, це найкращий огляд усього сайту.
Chrome DevTools. Панель Performance показує LCP, INP і CLS наживо, поки ви клікаєте сторінкою, — так легко знайти конкретний елемент-винуватець.

Що найчастіше псує кожну метрику

LCP: основний вміст з’являється пізно

Важке головне зображення або слайдер: великі файли, без сучасного формату, без width і height.
Зображення LCP завантажується ліниво. loading="lazy" на зображенні першого екрана навмисно його затримує; приберіть його там і додайте fetchpriority="high".
Повільна відповідь сервера (TTFB): немає кешування сторінок, повільний хостинг, важкі плагіни.
CSS і JavaScript, що блокують відображення, і шрифти, які ховають текст, доки не завантажаться.

INP: сторінка реагує повільно

Забагато JavaScript в основному потоці: конструктори сторінок, слайдери, віджети чатів, менеджери тегів із десятками тегів.
Довгі задачі після кліку: важкі події аналітики, фільтри, що перемальовують усю сторінку.
Сторонні скрипти. Кожен додатковий домен коштує з’єднання і часто — часу основного потоку.

CLS: макет стрибає

Зображення, відео й iframe без розмірів, тож браузер не резервує під них місце.
Банери cookie, промосмуги й реклама, що вставляються над наявним вмістом.
Шрифти, які підміняються з іншими розмірами й зсувають текст.

Виправлення, що працюють на більшості сайтів WordPress

Увімкніть кешування сторінок (плагін кешування або кеш на рівні сервера) і переконайтеся, що хостинг працює на актуальній версії PHP.
Віддавайте зображення у WebP або AVIF у тому розмірі, в якому їх показано, з width і height. Перевірте, що сервер або CDN справді повертає сучасний формат, а не лише що так написано в назві файлу.
Не вантажте ліниво зображення першого екрана; все, що нижче, — вантажте ліниво.
Приберіть плагіни й скрипти, якими не користуєтеся, а чати й маркетингові віджети вантажте лише після взаємодії або на потрібних сторінках.
Попередньо завантажуйте основний шрифт, використовуйте font-display: swap і тримайте мало файлів шрифтів.
Резервуйте місце під банери, вбудовування й рекламу, щоб нічого не зсувало вміст після появи.

Як це виглядає в HTML:

<!-- Зображення першого екрана: без лінивого завантаження, високий пріоритет, фіксований розмір -->
<img src="/hero.webp" width="1200" height="630" fetchpriority="high" alt="…">

<!-- Зображення нижче на сторінці -->
<img src="/photo.webp" width="800" height="600" loading="lazy" alt="…">

<!-- Основний шрифт: попереднє завантаження, текст видно, поки шрифт вантажиться -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter.woff2") format("woff2");
    font-display: swap;
  }
</style>

Після змін одразу запустіть аудит ще раз — лабораторний результат оновиться відразу. Польові дані оновлюються поступово: дайте їм до 28 днів, щоб повністю відобразити покращення.

Часті запитання

Чи впливають Core Web Vitals на позиції в Google?

Вони входять до сигналів зручності сторінки. Релевантність вмісту важить значно більше, але серед сторінок схожої якості швидша й стабільніша має перевагу — і незалежно від позицій краще перетворює відвідувачів на клієнтів.

Чому бал PageSpeed щоразу різний?

Бал — результат одного лабораторного тесту, а умови мережі й сервера змінюються між запусками. Дивіться на тенденцію і на польові дані, а не на одне число.

У мого сайту немає польових даних. Це проблема?

Ні. Chrome публікує польові дані, лише коли в сайту достатньо відвідувань. Доти орієнтуйтеся на лабораторні метрики, особливо LCP і TBT.

Який бал PageSpeed для мобільних вважається добрим?

90 і вище — добре. Багато бізнес-сайтів отримують на мобільних 50–89, бо тест імітує телефон середнього класу на повільному з’єднанні; оцінка Core Web Vitals за польовими даними важливіша за сам бал.

Перевірте свій сайт зараз

Вставте адресу в безкоштовний аудит сайту. Приблизно за хвилину ви отримаєте Core Web Vitals для мобільних і десктопа, перелік того, що гальмує сторінку, з оцінкою виграшу, і план покращень за пріоритетом, який можна експортувати в Jira чи Trello. Джерела: web.dev: Web Vitals, Google Search Central: Core Web Vitals.

Core Web Vitals простими словами: LCP, INP і CLS та як їх перевірити