Core Web Vitals: як прискорити сайт і не втратити позиції в Google
Чому Google оцінює швидкість — і як це впливає на ваш бізнес
З 2021 року Google використовує Core Web Vitals як фактор ранжування. Це не просто «технічна метрика» — сайти з поганими показниками втрачають до 25% органічного трафіку. А кожна додаткова секунда завантаження знижує конверсію на 7%.
Три метрики, які вирішують все
LCP (Largest Contentful Paint) — до 2.5 секунди
Час відображення найбільшого елемента на сторінці (зазвичай — hero-зображення або заголовок). Найчастіша проблема: неоптимізовані зображення, повільний сервер, блокуючий CSS/JS.
INP (Interaction to Next Paint) — до 200 мс
Замінив FID у 2024 році. Вимірює затримку між дією користувача (клік, тап) та візуальною реакцією сторінки. Найчастіша проблема: важкий JavaScript, довгі таски в main thread.
CLS (Cumulative Layout Shift) — до 0.1
Наскільки елементи «стрибають» під час завантаження. Коли банер вантажиться і зсуває текст — це CLS. Найчастіша проблема: зображення без розмірів, динамічний контент, веб-шрифти.
Практичні техніки оптимізації
Для LCP
- WebP/AVIF формати — зменшують розмір зображень на 30-50% без втрати якості
- Preload для hero-зображення —
<link rel="preload" as="image" href="hero.webp"> - CDN — Cloudflare, Fastly зменшують TTFB на 40-70%
- Lazy loading — завантажуйте зображення тільки коли вони з'являються у viewport (крім hero)
- Серверний кешинг — Cache-Control headers для статичних ресурсів
Для INP
- Code splitting — розбийте JS на чанки, завантажуйте тільки потрібне
- Debounce/throttle — обмежте частоту обробників подій
- Web Workers — перенесіть важкі обчислення з main thread
- Уникайте layout thrashing — не читайте і не змінюйте DOM в одному циклі
Для CLS
- width/height на всіх img — або CSS aspect-ratio
- font-display: swap +
<link rel="preload">для шрифтів - Зарезервуйте місце для динамічного контенту (реклама, embeds)
- Уникайте insertBefore — не вставляйте контент вище поточного viewport
Інструменти діагностики
- PageSpeed Insights — лабораторні + польові дані, конкретні рекомендації
- Chrome DevTools → Performance — детальний профіль завантаження
- Web Vitals Extension — реал-тайм показники в браузері
- Search Console → Core Web Vitals — звіт по всьому сайту
- CrUX Dashboard — 28-денна історія реальних користувачів
Типовий план оптимізації (що ми робимо для клієнтів)
- Аудит поточних показників через PageSpeed + CrUX
- Оптимізація зображень (конвертація в WebP, responsive images)
- Налаштування кешування та CDN
- Оптимізація CSS/JS (critical CSS, code splitting, tree shaking)
- Виправлення CLS (розміри медіа, preload шрифтів)
- Моніторинг через RUM (Real User Monitoring)