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-денна історія реальних користувачів

Типовий план оптимізації (що ми робимо для клієнтів)

1. Аудит поточних показників через PageSpeed + CrUX
2. Оптимізація зображень (конвертація в WebP, responsive images)
3. Налаштування кешування та CDN
4. Оптимізація CSS/JS (critical CSS, code splitting, tree shaking)
5. Виправлення CLS (розміри медіа, preload шрифтів)
6. Моніторинг через RUM (Real User Monitoring)

Потрібна оптимізація швидкості?

👉 SEO-оптимізація з технічним аудитом

Замовити аудит Core Web Vitals →