Core Web Vitals: что это и как их улучшить

Core Web Vitals — это набор метрик, разработанных Google, которые измеряют реальный пользовательский опыт на сайте: как быстро он загружается, насколько хорошо реагирует на взаимодействие и остаётся ли макет стабильным. Эти показатели влияют не только на удовлетворённость посетителей, но и на позиции сайта в поиске Google, поскольку являются частью сигналов ранжирования. Есть три основные метрики: LCP, INP и CLS.

LCP — отрисовка крупнейшего контента

Largest Contentful Paint измеряет время, когда в видимой области отрисовывается крупнейший содержательный элемент — обычно главное изображение или блок заголовка. Это отражает, как быстро пользователь видит основной контент страницы. Хороший показатель LCP — 2,5 секунды или меньше.

Чтобы улучшить LCP, оптимизируйте изображения с помощью современных форматов, таких как WebP или AVIF, и указывайте их размеры. Используйте сеть доставки контента (CDN), внедрите кэширование и сократите время ответа сервера. Загружайте критические ресурсы с приоритетом, а второстепенные скрипты откладывайте.

INP — отзывчивость на взаимодействие

Interaction to Next Paint в 2024 году заменила прежнюю метрику FID (First Input Delay). INP измеряет, насколько быстро страница визуально реагирует на действия пользователя — клики, касания и нажатия клавиш — на протяжении всего визита. Хороший INP — меньше 200 миллисекунд.

Главный враг INP — тяжёлый JavaScript, блокирующий основной поток. Разбивайте длинные задачи на более мелкие, откладывайте некритичный код, сокращайте количество сторонних скриптов и используйте веб-воркеры для сложных вычислений. Чем меньше работы браузеру нужно выполнить в момент взаимодействия, тем быстрее будет отклик.

CLS — совокупное смещение макета

Cumulative Layout Shift измеряет визуальную стабильность — насколько сильно элементы неожиданно смещаются во время загрузки страницы. Каждый сталкивался с ситуацией, когда собираешься нажать кнопку, но реклама или изображение внезапно сдвигают контент. Хороший показатель CLS — 0,1 или меньше.

Чтобы предотвратить смещения, всегда указывайте размеры изображений и видео (width и height), резервируйте место для рекламы и встроенного контента и избегайте вставки контента над уже видимыми элементами. Загружайте шрифты так, чтобы они не вызывали переформатирование текста.

Как измерять и улучшать

Существует два типа данных: лабораторные (lab data) и полевые (field data). Lighthouse и PageSpeed Insights дают лабораторные измерения в контролируемой среде, а Chrome User Experience Report (CrUX) собирает данные реальных пользователей. Google использует для ранжирования именно полевые данные, поэтому доверяйте показателям CrUX.

Начните с PageSpeed Insights, который объединяет оба типа данных и даёт конкретные рекомендации. Раздел «Core Web Vitals» в Search Console показывает проблемы по всему сайту. Практический порядок улучшений: оптимизируйте изображения, минифицируйте и откладывайте JavaScript, внедрите кэширование и CDN, а также стабилизируйте макет. Измеряйте после каждого изменения, ведь оптимизация — это непрерывный процесс.