Core Web Vitals: LCP, FID, CLS — как улучшить

Что такое Core Web Vitals

Core Web Vitals — это набор метрик от Google, которые измеряют реальный пользовательский опыт: скорость загрузки, интерактивность и визуальную стабильность страницы. С 2021 года эти метрики являются фактором ранжирования в Google. В 2024 году FID был заменён на INP (Interaction to Next Paint).

Оптимизация Core Web Vitals — важная часть технического SEO и продвижения в целом. Сайты с хорошими показателями получают преимущество в ранжировании при прочих равных условиях.

Три ключевые метрики

LCP (Largest Contentful Paint)

Время отрисовки самого крупного видимого элемента на странице (изображение, видео, текстовый блок). Показывает, когда пользователь видит основной контент.

• Хорошо: менее 2,5 секунд
• Нужна оптимизация: 2,5–4 секунды
• Плохо: более 4 секунд

INP (Interaction to Next Paint)

Заменил FID в 2024 году. Измеряет задержку между действием пользователя (клик, нажатие клавиши, тап) и визуальным откликом страницы. В отличие от FID, INP учитывает ВСЕ взаимодействия за время сессии, а не только первое.

• Хорошо: менее 200 мс
• Нужна оптимизация: 200–500 мс
• Плохо: более 500 мс

CLS (Cumulative Layout Shift)

Кумулятивное смещение макета — измеряет, насколько элементы страницы «прыгают» во время загрузки. Каждый видел ситуацию: вы собираетесь нажать на кнопку, а она сдвигается из-за загрузившегося баннера. Это и есть layout shift.

• Хорошо: менее 0,1
• Нужна оптимизация: 0,1–0,25
• Плохо: более 0,25

Как улучшить LCP

Оптимизация сервера

• Сократить TTFB — время до первого байта должно быть менее 200 мс. Используйте быстрый хостинг, серверное кэширование, CDN.
• HTTP/2 или HTTP/3 — параллельная загрузка ресурсов.
• Сжатие — Brotli эффективнее gzip на 15–20%.

Оптимизация ресурсов

• Изображения — формат WebP/AVIF, сжатие без потери качества, адаптивные размеры через srcset.
• Preload ключевых ресурсов — link rel="preload" для LCP-изображения, основного шрифта.
• Критический CSS — инлайновый CSS для контента первого экрана, остальной — асинхронно.
• Lazy loading — для изображений ниже первого экрана, но НЕ для LCP-элемента.

Как улучшить INP

• Оптимизация JavaScript — разбивайте длительные задачи (long tasks более 50 мс) на части через requestIdleCallback или setTimeout.
• Уменьшите объём JS — удалите неиспользуемый код, откладывайте загрузку некритичных скриптов (defer, async).
• Web Workers — перенесите тяжёлые вычисления в фоновый поток.
• Уменьшите размер DOM — менее 1500 элементов — идеал, более 3000 — проблема.
• Избегайте синхронных обработчиков — тяжёлые обработчики кликов блокируют основной поток.

Как улучшить CLS

• Размеры изображений и видео — всегда указывайте width и height в HTML или через aspect-ratio в CSS.
• Место для рекламы — резервируйте пространство для баннеров до их загрузки (min-height).
• Шрифты — используйте font-display: swap и preload для предотвращения FOIT/FOUT.
• Динамический контент — не вставляйте элементы выше видимой области без взаимодействия пользователя.
• Анимации — используйте CSS transform вместо изменения width/height/top.

Инструменты измерения

Полевые данные (Field Data)

• PageSpeed Insights — показывает реальные данные из Chrome UX Report.
• Google Search Console — раздел Core Web Vitals, группировка по URL.
• CrUX Dashboard — визуализация истории метрик по месяцам.

Лабораторные данные (Lab Data)

• Lighthouse (Chrome DevTools) — аудит с подробными рекомендациями.
• WebPageTest — детальный анализ водопада загрузки.
• GTmetrix — комбинация лабораторных метрик и рекомендаций.

Core Web Vitals для WordPress

WordPress-сайты часто страдают от плохих Core Web Vitals из-за тяжёлых тем и плагинов. Рекомендации:

• Используйте WP Rocket или LiteSpeed Cache для кэширования.
• ShortPixel или Imagify для оптимизации изображений.
• Perfmatters для отключения ненужных скриптов на конкретных страницах.
• Минимизируйте количество плагинов — каждый добавляет CSS и JS.

Если показатели Core Web Vitals на вашем сайте красные — обратитесь к нам. Мы проведём детальный анализ и оптимизируем сайт до зелёных показателей. Это также поможет улучшить поведенческие факторы.