Core Web Vitals — три показателя, по которым Google оценивает, насколько удобно пользоваться страницей: LCP (как быстро появляется основной контент, норма до 2,5 с), INP (как быстро страница реагирует на нажатия, норма до 200 мс) и CLS (насколько сильно прыгает макет при загрузке, норма до 0,1). Проверить их можно бесплатно в PageSpeed Insights и в отчёте Google Search Console. Ниже объясняем каждую метрику без технических терминов и показываем, какие правки обычно помогают.
Зачем бизнесу эти три буквы
Google использует Core Web Vitals как один из сигналов ранжирования. Влияние на позиции небольшое: при похожем контенте и ссылках выше встаёт сайт, которым удобнее пользоваться. У Яндекса таких метрик нет, но скорость и удобство на мобильных он тоже учитывает, а Турбо-страницы, которые раньше решали проблему скорости за владельца, закрыты.
Важнее другое. Медленная страница теряет клиентов до того, как они увидят цены. Задержка в несколько секунд на мобильном заметно снижает долю людей, которые дождутся загрузки и оставят заявку. Поэтому работа над этими показателями окупается через конверсию, даже если позиции не изменятся.
Что такое LCP
LCP (Largest Contentful Paint) — время от начала загрузки до момента, когда на экране появился самый крупный элемент: обычно это главное фото, баннер или большой блок текста. Для пользователя это момент «страница открылась».
| Значение | Оценка |
|---|---|
| до 2,5 с | хорошо |
| 2,5–4 с | требует улучшения |
| больше 4 с | плохо |
Почему LCP бывает большим
- Медленный ответ сервера: дешёвый хостинг, тяжёлая CMS без кеша, десятки плагинов. Норма для ответа сервера до 0,8 с.
- Тяжёлое главное изображение: фото на 3–5 мегабайт в JPEG вместо 100–200 килобайт в WebP.
- Картинка на первом экране загружается «лениво», как будто она в самом низу страницы.
- Стили и скрипты, которые блокируют отрисовку: пока не загрузился весь CSS и десяток сторонних скриптов, браузер ничего не показывает.
- Шрифты, которые скачиваются долго, пока текст их ждёт.
Как улучшить LCP
- Включите кеширование страниц на сервере. Если трафик заметный, подключите CDN.
- Сожмите главное изображение: WebP или AVIF, размер под реальную ширину экрана, вес до 200 килобайт.
- Снимите ленивую загрузку с изображения на первом экране и дайте ему приоритет.
- Отложите сторонние скрипты (чаты, виджеты, трекеры) до момента, когда страница отрисована.
- Используйте системные шрифты или подключайте свои с режимом
font-display: swap.
Что такое INP
INP (Interaction to Next Paint) — время от действия пользователя (нажатие кнопки, тап по меню, ввод в поле) до момента, когда экран обновился в ответ. Метрика учитывает все взаимодействия за время на странице и берёт одно из худших. С марта 2024 года INP заменила прежнюю метрику FID.
| Значение | Оценка |
|---|---|
| до 200 мс | хорошо |
| 200–500 мс | требует улучшения |
| больше 500 мс | плохо |
Почему INP бывает большим
- Много JavaScript: конструкторы сайтов, тяжёлые темы, слайдеры и калькуляторы, которые грузят всё сразу.
- Сторонние скрипты: онлайн-чаты, виджеты отзывов, пиксели рекламных систем. Каждый занимает процессор телефона.
- Обработчики, которые делают слишком много при одном клике: пересчитывают всю страницу или ждут ответа сервера, прежде чем показать реакцию.
Как улучшить INP
- Пересчитайте сторонние скрипты. Больше 5–7 на странице уже повод убрать лишние. Один чат-виджет часто весит больше всего остального сайта.
- Загружайте скрипты с отложенным выполнением, чтобы они не мешали первому взаимодействию.
- Показывайте реакцию сразу: кнопка нажалась, появился индикатор, а тяжёлая работа идёт потом.
- На конструкторах проверьте, не включены ли лишние блоки и анимации.
Что такое CLS
CLS (Cumulative Layout Shift) — показатель того, насколько сильно элементы страницы сдвигаются во время загрузки. Знакомая ситуация: вы собираетесь нажать на кнопку, сверху подгружается баннер, всё съезжает вниз, и вы попадаете по рекламе. Чем крупнее элементы и чем дальше они сдвинулись, тем выше CLS.
| Значение | Оценка |
|---|---|
| до 0,1 | хорошо |
| 0,1–0,25 | требует улучшения |
| больше 0,25 | плохо |
Почему CLS бывает большим
- У изображений и видео не заданы размеры, и браузер не знает, сколько места под них оставить.
- Баннеры, уведомления о cookies, формы подписки появляются сверху и сдвигают контент.
- Шрифт подгрузился, и текст перевёрстывается, потому что запасной шрифт был другой ширины.
- Рекламные блоки и виджеты вставляются в середину страницы после загрузки.
Как улучшить CLS
- Пропишите у всех изображений и видео атрибуты ширины и высоты или задайте соотношение сторон в CSS.
- Резервируйте место под баннеры и виджеты заранее, даже если они загружаются позже.
- Уведомление о cookies показывайте поверх страницы, чтобы оно не сдвигало контент.
- Подберите запасной шрифт, близкий по ширине к основному, тогда перевёрстка будет незаметной.
Где смотреть показатели
PageSpeed Insights. Введите адрес страницы. Сверху блок с данными реальных пользователей: это полевые данные из браузера Chrome за последние 28 дней, именно они учитываются в ранжировании. Ниже лабораторный тест Lighthouse с рекомендациями. Лабораторный тест не измеряет INP, поэтому ориентируйтесь на полевые данные, когда они есть.
Google Search Console. Отчёт «Основные интернет-показатели» (Core Web Vitals) делит страницы сайта на хорошие, требующие улучшения и плохие, отдельно для мобильных и компьютеров. Здесь видно, какая группа страниц тянет сайт вниз, например все карточки товаров.
Chrome DevTools. Вкладка Performance показывает, какие скрипты и элементы занимают время. Это инструмент для разработчика.
Нюанс для России: полевые данные собираются только из Chrome, и для сайтов с небольшим трафиком PageSpeed Insights пишет, что данных недостаточно. Тогда ориентируйтесь на лабораторный тест и на собственные ощущения при открытии сайта с телефона через мобильный интернет.
С чего начать, если всё красное
Типичный порядок, который даёт результат за 1–2 недели работы разработчика:
| Шаг | Что делаем | На что влияет |
|---|---|---|
| 1 | Кеш на сервере, проверка хостинга | LCP |
| 2 | Сжатие изображений, размеры у картинок | LCP, CLS |
| 3 | Ревизия сторонних скриптов | INP, LCP |
| 4 | Отложенная загрузка скриптов и стилей | LCP, INP |
| 5 | Шрифты и резерв места под баннеры | CLS |
После правок подождите около месяца: полевые данные считаются по окну в 28 дней, и отчёт в Search Console изменится не сразу.
Если сайт собран на конструкторе и часть правок недоступна, иногда дешевле сделать быстрый сайт заново, чем бороться с ограничениями платформы.
Коротко
LCP отвечает за скорость появления контента, INP за отклик на действия, CLS за стабильность макета. Нормы: 2,5 с, 200 мс и 0,1. Проверяйте в PageSpeed Insights и Search Console, исправляйте в порядке «сервер, картинки, скрипты, шрифты». Эти работы входят в техническую оптимизацию, а узнать, что с показателями у вашего сайта прямо сейчас, можно через бесплатный экспресс-аудит.