Core Web Vitals: Что нужно знать

Что такое Core Web Vitals

Core Web Vitals (CWV) — это подмножество сигналов Page Experience, которые Google использует для ранжирования. В отличие от лабораторных тестов Lighthouse, CWV измеряются на реальных пользователях через Chrome User Experience Report (CrUX).

Три текущие метрики CWV:

LCP — Largest Contentful Paint

LCP измеряет время до отображения самого большого видимого элемента на странице — обычно это изображение героя или заголовок H1.

Значение	Оценка
≤ 2.5 секунд	✅ Хорошо
2.5 – 4.0 секунд	⚠️ Требует улучшения
> 4.0 секунд	❌ Плохо

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

• Оптимизируйте изображения — конвертируйте в WebP или AVIF, добавьте loading="eager" для изображений героя.
• Предварительная загрузка LCP-элемента — добавьте <link rel="preload" as="image">.
• Используйте CDN — уменьшает TTFB.
• Удалите блокирующие ресурсы — переместите некритические JS и CSS в defer/async.
• Серверный рендеринг — SSR значительно улучшает LCP для SPA.

CLS — Cumulative Layout Shift

CLS измеряет суммарное смещение элементов страницы во время загрузки.

Значение	Оценка
≤ 0.1	✅ Хорошо
0.1 – 0.25	⚠️ Требует улучшения
> 0.25	❌ Плохо

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

• Указывайте размеры изображений — всегда добавляйте width и height.
• Резервируйте место для рекламы — задайте фиксированные размеры для рекламных блоков.
• Не вставляйте контент над существующим — баннеры и уведомления о cookie должны быть внизу.
• Предварительная загрузка шрифтов — FOUT вызывает смещения.

INP — Interaction to Next Paint

INP заменил FID в марте 2024 года. Он измеряет задержку между взаимодействием пользователя и обновлением экрана.

В отличие от FID, INP отслеживает все взаимодействия и берет худшее значение.

Значение	Оценка
≤ 200 мс	✅ Хорошо
200 – 500 мс	⚠️ Требует улучшения
> 500 мс	❌ Плохо

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

• Разбейте длинные задачи — любой JS > 50мс блокирует браузер.
• Уменьшите размер JS-бандла — разделение кода и tree shaking.
• Избегайте синхронных операций в обработчиках событий.
• Проверьте сторонние скрипты — чат-боты и аналитика часто вызывают плохой INP.

Как измерить Core Web Vitals

Полевые данные

• Google Search Console → "Взаимодействие со страницей".
• PageSpeed Insights — сочетает полевые и лабораторные данные.
• CrUX Dashboard в Looker Studio.

Лабораторные данные

• Lighthouse в Chrome DevTools.
• WebPageTest — детальное тестирование.

Влияние CWV на SEO

Google подтвердил: CWV является фактором ранжирования, но контент все еще важнее.

Практически: если ваш сайт в зеленой зоне, CWV не помешает росту.