Core Web Vitals 2026: повний гайд по LCP, INP, CLS і як їх виправити

Що таке Core Web Vitals і чому це важливо

Core Web Vitals (CWV) — це 3 метрики UX, які Google використовує як прямий сигнал якості сайту з 2021 року. Замінили попередні «Page Experience signals». CWV — обовʼязкова частина технічного аудиту на 80 пунктів, без якого SEO-стратегія не запускається.

Метрика 1: LCP (Largest Contentful Paint)

Що це: Час від початку завантаження до моменту коли користувач бачить основний контент (зазвичай hero-image або великий заголовок).

Топ-5 причин поганого LCP

1. Великий hero-image без оптимізації (JPG 2-5 MB замість WebP 200-400 KB)
2. Server-side rendering (SSR) з повільним TTFB (бекенд відповідає більше 600ms)
3. Render-blocking CSS у head (велика стилі-таблиця блокує перший пейнт)
4. Web fonts без font-display: swap (текст невидимий до завантаження шрифту)
5. Третя сторона JS на критичному шляху (Google Tag Manager без async)

Як виправити LCP

<!-- 1. Preload критичного зображення -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. WebP/AVIF замість JPG/PNG -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="..." width="1200" height="600">
</picture>

<!-- 3. font-display: swap -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/inter.woff2') format('woff2');
    font-display: swap;
  }
</style>

Метрика 2: INP (Interaction to Next Paint)

Що це: Час від кліку/тапу до моменту коли користувач бачить візуальну реакцію. У 2024 замінила FID як офіційна метрика CWV.

Чому INP а не FID:

• FID міряв тільки перший інтерактив
• INP міряє всі інтерактиви протягом сесії — реалістичніше

Топ-5 причин поганого INP

1. Важкі JS-обробники подій (onclick з 100+ ms роботи)
2. Великі сторонні скрипти (Hotjar, Intercom, Tidio без optimization)
3. React/Vue re-renders на кожен інтерактив
4. Synchronous AJAX requests (XHR.open(..., false))
5. Long tasks > 50ms на головному потоці

Як виправити INP

// 1. Розбити довгу задачу на менші через requestIdleCallback
function processBigData(items) {
  if (items.length === 0) return;
  const chunk = items.splice(0, 100);
  doWork(chunk);
  requestIdleCallback(() => processBigData(items));
}

// 2. Дебаунс на input
input.addEventListener('input', debounce((e) => {
  search(e.target.value);
}, 300));

// 3. Async третьої сторони
<script async src="https://gtm.com/script.js"></script>

Метрика 3: CLS (Cumulative Layout Shift)

Що це: Сума всіх несподіваних зміщень контенту під час завантаження сторінки. Користувач починає читати → текст стрибає → клікає не туди.

Топ-5 причин поганого CLS

1. Зображення без розмірів (<img> без width/height)
2. Iframe без розмірів (Google Maps, YouTube embed)
3. Динамічна реклама (Adsense вставляється посередині контенту)
4. Веб-шрифти з різними розмірами (fallback ≠ web-font width)
5. Лазі-завантажений контент без reserved-space

Як виправити CLS

<!-- 1. Завжди width + height для img -->
<img src="/photo.webp" alt="..." width="800" height="600">

<!-- 2. Aspect-ratio контейнер для embed -->
<div style="aspect-ratio: 16/9; max-width: 800px;">
  <iframe src="..." style="width:100%; height:100%;"></iframe>
</div>

<!-- 3. Reserved space для динамічних блоків -->
<div style="min-height: 250px;" id="ad-slot"></div>

Інструменти вимірювання

Важливо: Google для ранкінгу використовує field data з CrUX (Chrome User Experience), не Lighthouse score. Lighthouse — для debug, але не еталон.

12 типових проблем CWV і їх вирішення

Проблеми LCP

Проблеми INP

Проблеми CLS

Реальний кейс — інтернет-магазин 12 тижнів

Старт:

• LCP: 4.8s (mobile)
• INP: 420ms
• CLS: 0.28
• Lighthouse Performance: 32

Що зробили:

Бізнес-результат:

• +47% органічного трафіку (через ranking boost)
• +18% conversion rate (через швидкість)
• −28% bounce rate

CWV-оптимізація особливо критична для programmatic SEO проектів, де тисячі сторінок мають індексуватись швидко.

Висновок

Core Web Vitals — це не «технічна дрібниця», а прямий ranking-фактор Google і відчутний UX-сигнал.

Що робити прямо сьогодні:

1. Зайти в PageSpeed Insights → перевірити mobile поточну ситуацію
2. Зайти в GSC → подивитись звіт Core Web Vitals
3. Виправити критичні (червоні) проблеми за 1-2 тижні
4. Чекати 28 днів — CrUX оновить дані → ranking-ефект