Core Web Vitals: как пройти проверку скорости сайта

«У вас красные Core Web Vitals» — фраза, которую владелец сайта чаще всего слышит от SEO-специалиста или разработчика и не очень понимает, что с этим делать. На самом деле за пугающим названием прячутся три простые метрики, и для большинства сайтов их можно довести до зелёной зоны без полной переделки.

01Что такое Core Web Vitals

Core Web Vitals — это набор показателей качества пользовательского опыта, который ввёл Google. Все измерения делаются на реальных устройствах посетителей: данные собираются через Chrome и агрегируются по 28-дневным окнам в отчёте CrUX. Из десятка возможных метрик в «ядро» входят три:

• LCP (Largest Contentful Paint) — насколько быстро отображается главный визуальный элемент страницы.
• INP (Interaction to Next Paint) — как быстро страница откликается на действия пользователя. С марта 2024 года заменила старую метрику FID.
• CLS (Cumulative Layout Shift) — насколько сильно прыгает вёрстка во время загрузки.

Google официально учитывает их как фактор ранжирования в мобильной выдаче. Яндекс в явном виде Core Web Vitals не использует, но смотрит на собственные показатели поведения и скорости — и они сильно коррелируют с теми же узкими местами в коде.

02LCP, INP, CLS — что это и какие пороги

LCP — скорость появления главного блока

Это время от начала загрузки страницы до момента, когда отрисован самый большой видимый элемент — обычно главная картинка, h1 или большой блок текста. Пороговые значения:

• Зелёная зона — до 2,5 секунды;
• жёлтая — от 2,5 до 4 секунд;
• красная — больше 4 секунд.

INP — отзывчивость на клики

Метрика измеряет, сколько миллисекунд проходит между действием пользователя (клик, тап, ввод с клавиатуры) и следующим визуальным откликом страницы. Берётся не среднее, а близкое к худшему значению — поэтому одна тяжёлая кнопка способна провалить весь сайт.

• Зелёная зона — до 200 мс;
• жёлтая — 200–500 мс;
• красная — больше 500 мс.

CLS — стабильность вёрстки

Считает, насколько сильно элементы страницы сдвигаются после первого показа. Самый частый кейс: вы тянетесь нажать кнопку, а сверху догружается баннер и сдвигает всё вниз — палец попадает в другое место. CLS — безразмерное число:

• Зелёная зона — до 0,1;
• жёлтая — 0,1–0,25;
• красная — больше 0,25.

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

Есть два типа данных: полевые (real-user, собираются с реальных пользователей Chrome) и лабораторные (симуляция в инструменте). Решает поиск всегда по полевым, но лабораторные удобны для отладки.

• PageSpeed Insights (pagespeed.web.dev) — главный инструмент. Показывает и полевые данные из CrUX, и лабораторные из Lighthouse, отдельно для мобильных и десктопа.
• Lighthouse в DevTools браузера — быстрый локальный замер при отладке.
• Search Console → отчёт «Основные интернет-показатели» — показывает, какие группы страниц проваливаются и сколько их.
• Web Vitals расширение для Chrome — мгновенно подсвечивает значения на любом сайте.
• Яндекс.Метрика — даёт собственные метрики скорости и карту проблемных страниц, полезна как кросс-проверка.

Важно: лабораторный балл «92 из 100» в Lighthouse не равен зелёным Core Web Vitals — это разные шкалы. Ориентируйтесь на конкретные значения LCP/INP/CLS, а не на общую цифру.

04Типичные причины красных метрик

LCP «медленный»

• тяжёлое фоновое изображение или баннер в первом экране без сжатия;
• картинки в формате JPG/PNG там, где напрашивается WebP/AVIF;
• нет lazy-load на тех изображениях, что ниже первого экрана, зато он стоит на главной картинке (так делать не надо);
• медленный хостинг и долгий TTFB (Time To First Byte);
• тяжёлые шрифты, которые блокируют отрисовку.

INP «деревянный»

• тяжёлый JavaScript: тонна сторонних скриптов (чаты, виджеты, аналитики, A/B-тесты);
• длинные задачи в главном потоке — основной поток забит обработкой, нечем отвечать на клик;
• самописные слайдеры/попапы, которые при каждом действии перестраивают DOM;
• большие сторонние библиотеки, подключённые целиком ради одной функции.

CLS «прыгает»

• у картинок и видео не заданы размеры — браузер не знает, сколько места резервировать;
• баннеры, чаты, всплывающие плашки cookie вставляются сверху уже после загрузки;
• веб-шрифты подгружаются с задержкой и меняют размеры текстовых блоков;
• динамически вставляемые блоки (отзывы, виджеты соцсетей) толкают контент вниз.

05Что делать: план работ

Полная переделка сайта обычно не нужна. Достаточно последовательно закрыть основные точки:

1. Изображения — пересохранить в WebP/AVIF, прописать width и height, для главных картинок добавить preload.
2. Шрифты — оставить минимум начертаний, использовать font-display: swap, грузить с того же домена.
3. Скрипты — вынести сторонние коды (чаты, пиксели) на отложенную загрузку, убрать дубли и неиспользуемое.
4. Хостинг и кэш — включить серверный кэш, gzip/brotli, при возможности подключить CDN. Это лечит сразу LCP и общий TTFB.
5. Вёрстка — зарезервировать места под баннеры, виджеты и плашки cookie, чтобы они не двигали контент.
6. Мобильная версия — все замеры в первую очередь на мобильных, потому что поиск судит именно по ней. Полезно параллельно прочитать про адаптивность сайта и общую скорость загрузки.

После каждого этапа — повторный замер. Часто после оптимизации картинок и шрифтов LCP уходит в зелёную зону сам по себе, а половина проблем с CLS решается простановкой размеров.

06Почему это влияет не только на SEO

Скорость и стабильность — это не вопрос «понравиться поисковику». Это вопрос экономики сайта. Каждая лишняя секунда загрузки на мобильных режет конверсию, поднимает стоимость заявки в Директе и обесценивает любые маркетинговые усилия. По сути, Core Web Vitals — это бесплатный чек-лист пользовательского опыта, который заодно учитывается в выдаче. Поэтому имеет смысл встраивать его в обычный процесс разработки и доработок сайта, а не вспоминать раз в год после очередного отчёта.

Официальная документация по теме — Справка Яндекс.Вебмастера.