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="/ru/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.