Core Web Vitals для українських сайтів: як пройти LCP, INP, CLS

З 2021 року Google офіційно враховує Core Web Vitals у ранжуванні. На практиці сайти, які не проходять ці метрики, втрачають 10-25% органічного трафіку. Нижче розписали, що саме робити, без абстракцій.

Що таке LCP, INP, CLS

• LCP (Largest Contentful Paint). Це час, коли відображається найбільший видимий блок. Ціль: < 2.5с.
• INP (Interaction to Next Paint). Це затримка після кліку чи тапу. Ціль: < 200мс. З березня 2024 замість FID.
• CLS (Cumulative Layout Shift). Це зсув елементів під час завантаження. Ціль: < 0.1.

Перевірити можна в PageSpeed Insights (обовʼязково в режимі mobile), у Google Search Console → Core Web Vitals, або через DevTools → Lighthouse.

Хостинг: TTFB < 200мс

Якщо сервер відповідає повільно, ніщо інше не врятує. Типова картина українського shared-хостингу: TTFB 500-1200мс, тоді як LCP вимагає < 800мс загалом.

Що робити:

• Беріть хостинг з серверами в ЄС (Франкфурт, Варшава), щоб для українських користувачів ping був < 30мс.
• PHP 8.2+ з OPCache (дає +30% швидкості в WordPress/OpenCart).
• Redis або Memcached для кешу (особливо у WooCommerce).
• Безкоштовний Cloudflare перед сайтом, одразу отримуєте CDN і кешування.

Зображення: WebP, розміри, lazy

80% проблем з LCP виникають через важкі зображення hero-банера.

• Формат WebP або AVIF замість JPG чи PNG. Економія 40-60%.
• Адаптивні розміри через srcset: 640w, 1024w, 1920w.
• loading="lazy" для всіх зображень, окрім hero-банера. Йому ставимо fetchpriority="high".
• Завжди задавайте width і height, це фіксує CLS.

Шрифти: swap + preload

Google Fonts з коробки гальмує: кілька HTTP-запитів і FOIT, коли текст невидимий, поки вантажиться шрифт.

Рішення: підключати шрифти локально (self-hosted), з параметром font-display: swap, preload критичних варіантів:

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

JavaScript: INP без блокувань

INP страждає від важкого JS на сторінці: React з купою залежностей, Google Tag Manager з 20+ тегами, аналітика.

• GTM ставимо тільки для справжніх потреб аналітики, а не «про всяк випадок».
• Атрибут defer або async для всіх не критичних скриптів.
• Код-спліт для React і Vue бандлів, щоб не вантажити все одним файлом.
• Фейсбук-піксель і Google Ads завантажуйте після взаємодії користувача.

CLS: стабільний лейаут

CLS скаче, коли елементи завантажуються і штовхають контент.

• Фіксовані розміри для зображень, iframe, відео.
• Резервуйте місце під банери та поп-апи.
• Шрифти з font-display: swap + близький fallback (Arial, sans-serif), щоб мінімізувати різницю висоти.
• Ніяких раптових банерів на куки. Місце під них резервуйте знизу.

Чек-лист для власника сайту

1. Відкрийте PageSpeed Insights, введіть свій URL, режим Mobile.
2. Якщо LCP > 2.5с, дивіться секцію «Opportunities». Перш за все: хостинг і зображення.
3. Якщо CLS > 0.1, шукайте елементи без розмірів (зазвичай це банер, попап або слайдер).
4. Якщо INP > 200мс, ваш JS блокує рендер. Перегляньте список плагінів WordPress або розширень OpenCart.
5. Через 14-28 днів після виправлень перевірте Search Console → Core Web Vitals. Дані там накопичуються поступово.

На нашому досвіді виправлення цих 5 речей дає в середньому +20% швидкості завантаження і +12-15% конверсії. Якщо потрібно ревізувати свій сайт, напишіть нам, у контактах є Telegram.