Що вимірює Core Web Vitals?

Ці метрики напряму впливають на SEO-рейтинг, тому що відображають: наскільки швидко сторінка завантажується, наскільки вона чуйна, і наскільки стабільно відображається під час завантаження.

#Core Web Vitals - це 3 основні метрики:

#Розберемо кожну детально

#1. LCP - Largest Contentful Paint

Що вимірює: Час, за який найбільший елемент видимого екрана (картинка, заголовок, блок тощо) стає видимим користувачу.

По суті, це показник, коли сторінка "сформувалась" візуально.

Добре: ≤ 2.5 с Середньо: 2.5-4 с Погано: > 4 с

Типові причини поганого LCP:

• повільний сервер / TTFB;
• блокуючі CSS і JS;
• великі зображення без оптимізації;
• відсутність lazy loading;
• рендер після важких JS-обчислень.

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

• Оптимізувати зображення (next/image, WebP, розміри);
• Налаштувати CDN і кешування;
• Використовувати preload для шрифтів і критичних ресурсів;
• Прибрати блокуючий JS з <head> (додати defer).

#2. INP - Interaction to Next Paint (нова ключова метрика)

Що вимірює: Скільки часу минає від дії користувача (клік, введення, тап) до моменту, коли інтерфейс візуально відреагував.

Тобто: користувач клікнув кнопку → коли з'явилась реакція (анімація, зміна тексту тощо).

Добре: ≤ 200 мс Середньо: 200-500 мс Погано: > 500 мс

Причини поганого INP:

• довгі JavaScript-задачі (>50 мс);
• синхронні обчислення в головному потоці;
• важкі рендери компонентів React/Vue;
• затримка в обробниках подій.

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

• Ділити важкі обчислення на чанки (setTimeout, requestIdleCallback);
• Використовувати Web Workers для CPU-навантажень;
• Оптимізувати ререндери React (мемоізація, useCallback);
• Зменшити bundle (code-splitting, lazy loading).

#3. CLS - Cumulative Layout Shift

Що вимірює: Наскільки сильно зсуваються елементи сторінки під час завантаження. (Наприклад: банер довантажився і все "поїхало".)

Чим більше несподіваного руху - тим гірший UX.

Добре: ≤ 0.1 Середньо: 0.1-0.25 Погано: > 0.25

Причини поганого CLS:

• картинки без фіксованих розмірів;
• рекламні блоки, вбудовані відео без контейнера;
• динамічні шрифти без fallback;
• ліниві елементи, вставлені без резервного місця.

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

• Завжди вказуй width і height у <img>;
• Використовуй aspect-ratio для відео і банерів;
• Резервуй місце під макет заздалегідь;
• Завантажуй шрифти з font-display: swap.

#Де дивитись ці метрики

#Чому це важливо

Core Web Vitals:

• входять у Google Page Experience (фактор ранжування SEO);
• напряму впливають на утримання користувачів;
• показують, наскільки сайт зручний і чуйний.

Швидкий сайт = вища конверсія, менше відмов, кращі позиції в пошуку.

#Підсумок