Core Web Vitals - это набор метрик Google и Яндекса для оценки пользовательского опыта на сайте.
С 2021 года они официально влияют на ранжирование в Google, и Яндекс активно двигается
в том же направлении. Разбираем, что означают эти метрики, как их проверить
и что делать если показатели в красной зоне.
Что такое Core Web Vitals и зачем они нужны
Core Web Vitals (CWV) - три конкретных измеримых показателя, которые Google ввёл
как стандарт качества пользовательского опыта. Идея простая: не просто «сайт должен
быть быстрым», а конкретные числа с чёткими пороговыми значениями.
Три показателя Core Web Vitals:
- LCP (Largest Contentful Paint) - время загрузки самого большого
видимого элемента на странице. Измеряет воспринимаемую скорость загрузки;
- INP (Interaction to Next Paint) - время отклика на взаимодействие.
Заменил FID в 2024 году, измеряет отзывчивость всей страницы;
- CLS (Cumulative Layout Shift) - суммарный сдвиг макета.
Измеряет визуальную стабильность: насколько элементы «прыгают» при загрузке.
Google официально использует CWV как сигнал ранжирования с июня 2021 года.
Яндекс включил скорость и стабильность страниц в свой алгоритм качества.
Плохие показатели CWV - прямой повод для снижения позиций.
LCP: скорость загрузки основного контента
LCP измеряет, через сколько секунд после начала загрузки пользователь видит
основной контент страницы - обычно это большое изображение, заголовок H1
или главный блок текста.
Пороговые значения:
- До 2,5 секунды - хорошо (зелёная зона);
- 2,5 - 4,0 секунды - нужно улучшить (жёлтая зона);
- Более 4,0 секунды - плохо (красная зона).
Главные причины плохого LCP:
- Большие неоптимизированные изображения в формате JPEG или PNG
вместо WebP или AVIF;
- Медленный сервер (высокий TTFB - время до первого байта от сервера);
- Блокирующие загрузку JavaScript и CSS скрипты;
- Изображение-герой без атрибута
fetchpriority="high" -
браузер загружает его с низким приоритетом.
INP: отзывчивость страницы на взаимодействие
INP измеряет задержку между действием пользователя (клик, нажатие клавиши, касание)
и визуальным откликом страницы. Это самая новая метрика из трёх: она заменила FID
в марте 2024 года и стала строже.
Пороговые значения:
- До 200 мс - хорошо;
- 200 - 500 мс - нужно улучшить;
- Более 500 мс - плохо.
Плохой INP чаще всего вызван тяжёлым JavaScript: объёмные фреймворки,
сторонние виджеты (чаты, калькуляторы, виджеты обратного звонка),
которые выполняют длинные задачи в основном потоке браузера.
INP особенно критичен для мобильных устройств: там процессор слабее
и JavaScript выполняется медленнее.
CLS: стабильность макета при загрузке
CLS измеряет, насколько сильно элементы страницы «прыгают» в процессе загрузки.
Вы читаете текст, и вдруг изображение загрузилось - весь контент сдвинулся вниз.
Или нажимаете кнопку, а в последний момент появился баннер и вы нажали не туда.
Это и есть сдвиг макета.
Пороговые значения CLS (безразмерный коэффициент):
- До 0,1 - хорошо;
- 0,1 - 0,25 - нужно улучшить;
- Более 0,25 - плохо.
Типичные источники плохого CLS:
- Изображения без заданных атрибутов
width и height -
браузер не знает, сколько места зарезервировать, и сдвигает контент
когда картинка загружается;
- Рекламные блоки и баннеры, которые появляются поверх контента;
- Шрифты, загружающиеся с заменой - текст сначала рендерится системным шрифтом,
потом перестраивается. Решение:
font-display: optional или preload;
- Динамически вставляемый контент (чаты, уведомления, куки-баннеры)
без зарезервированного пространства.
Как проверить свои показатели Core Web Vitals
Google PageSpeed Insights (pagespeed.web.dev) - бесплатно,
показывает данные как для реальных пользователей (Field Data) из Chrome UX Report,
так и лабораторные тесты. Основной инструмент.
Google Search Console - раздел «Качество страниц» или «Core Web Vitals».
Показывает проблемные URL с агрегированными данными по реальным пользователям.
Очень важно: здесь реальные данные, а не лабораторные.
Яндекс.Вебмастер - раздел «Качество сайта».
Яндекс оценивает скорость и пользовательский опыт по собственным алгоритмам,
которые близки к CWV, но не идентичны.
Chrome DevTools - вкладка Lighthouse для детального анализа.
Нажмите F12 - вкладка «Lighthouse» - «Generate report».
Даёт подробные рекомендации для каждой метрики.
Важно: проверяйте показатели отдельно для мобильных и десктопа.
Мобильные показатели обычно хуже и именно они имеют больший вес при ранжировании.
Как улучшить Core Web Vitals: приоритетные шаги
Действия с наибольшим эффектом:
- Конвертируйте изображения в WebP или AVIF.
Снижает вес изображений на 30-80% без потери визуального качества.
Даёт прямой прирост LCP;
- Задайте размеры всем изображениям.
Атрибуты
width и height на каждом <img>.
Устраняет большую часть проблем с CLS;
- Перенесите скрипты в конец body или добавьте defer/async.
Скрипты не должны блокировать рендеринг страницы;
- Настройте кэширование на сервере.
Статические ресурсы (CSS, JS, изображения) должны кэшироваться браузером
на срок от недели до года;
- Используйте CDN.
Сеть доставки контента снижает задержку до сервера для пользователей
из разных регионов;
- Аудитируйте сторонние скрипты.
Удалите неиспользуемые виджеты, чаты, пиксели. Каждый сторонний скрипт
добавляет задержку и снижает INP.
Улучшение Core Web Vitals - часть комплексной
технической оптимизации сайта.
Если показатели в красной зоне, это напрямую ограничивает потенциал роста позиций.
Наши специалисты проводят технический аудит с анализом CWV и дают конкретный план улучшений
в рамках
SEO-продвижения.
