Core Web Vitals: как проверить и улучшить (LCP, INP, CLS)

Что такое Core Web Vitals и почему они влияют на SEO

Core Web Vitals (CWV) — набор метрик, которые Google использует для оценки пользовательского опыта на сайте. С 2021 года они включены в алгоритм ранжирования Google как сигнал Page Experience. Хотя прямого влияния CWV на Яндекс нет, скорость загрузки и стабильность страницы косвенно влияют на поведенческие факторы — а они важны для обоих поисковиков.

Плохие показатели CWV означают, что пользователи уходят со страницы до её загрузки. Это увеличивает показатель отказов и сокращает время на сайте — поведенческие сигналы, на которые реагируют алгоритмы.

Три метрики Core Web Vitals:

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

Целевые значения метрик

Google установил пороговые значения для каждой метрики:

LCP: хорошо — до 2,5 секунды; требует улучшения — 2,5–4 секунды; плохо — более 4 секунд.
INP: хорошо — до 200 мс; требует улучшения — 200–500 мс; плохо — более 500 мс.
CLS: хорошо — до 0,1; требует улучшения — 0,1–0,25; плохо — более 0,25.

Для попадания в зелёную зону Page Experience все три метрики должны быть «хорошими» на минимум 75% страниц.

Как проверить Core Web Vitals сайта

Существуют два вида данных CWV: полевые (реальные данные от пользователей) и лабораторные (измерения в контролируемой среде).

Для SEO важнее полевые данные — именно их Google использует в ранжировании. Они доступны в:

Google Search Console → раздел «Качество страниц» / «Core Web Vitals» — показывает реальные данные по страницам вашего сайта.
Chrome UX Report (CrUX) — публичная база данных Google с агрегированными данными по миллионам сайтов.

Лабораторные данные — для диагностики и разработки:

Google PageSpeed Insights — онлайн-инструмент, показывает обе версии данных для конкретного URL.
Lighthouse — встроен в Chrome DevTools (F12 → вкладка Lighthouse).
Проверка Core Web Vitals на seotoolse.ru позволяет быстро проверить несколько URL и получить сводный отчёт без переключения между инструментами.

LCP: как улучшить время загрузки главного элемента

LCP чаще всего страдает из-за медленной загрузки изображений или медленного ответа сервера. Самые эффективные меры:

Оптимизация изображений

Конвертируйте изображения в современные форматы: WebP или AVIF вместо JPEG/PNG. Экономия веса — 30–50%.
Установите атрибут loading='eager' и fetchpriority='high' для LCP-изображения (того, что видно без прокрутки). Браузер загрузит его в первую очередь.
Укажите размеры изображения в атрибутах width и height — это позволяет браузеру зарезервировать место до загрузки.
Используйте адаптивные изображения через атрибут srcset: мобильные устройства загружают меньшую версию.

Ускорение ответа сервера (TTFB)

Включите кэширование на сервере: страницы, которые генерируются одинаково для всех пользователей, кешируйте и отдавайте статически.
Используйте CDN (сети доставки контента) — пользователи получают файлы с ближайшего к ним сервера.
Оптимизируйте запросы к базе данных и бэкенд-код.

Предзагрузка важных ресурсов

Добавьте в <head> тег preload для LCP-изображения:

<link rel='preload' as='image' href='/hero.webp' fetchpriority='high'>

Это даёт браузеру команду начать загрузку ресурса ещё до того, как он встретит его в HTML.

INP: как улучшить отклик на взаимодействия

INP — самая новая метрика, и многие сайты не обращают на неё внимания. Высокий INP (плохое значение) означает, что страница «зависает» после клика пользователя.

Основные причины плохого INP:

Тяжёлый JavaScript. Если основной поток браузера занят выполнением длинных задач JS, он не успевает реагировать на действия пользователя.
Слишком много event listeners. Каждый обработчик события добавляет нагрузку.
Перерисовка больших DOM-деревьев. Изменение одного элемента может вызвать пересчёт всей страницы.

Пути улучшения:

Разбейте длинные задачи JavaScript на более мелкие с помощью setTimeout или scheduler.yield().
Используйте ленивую загрузку скриптов: откладывайте загрузку скриптов, не нужных при первом взаимодействии.
Профилируйте производительность в Chrome DevTools (вкладка Performance) — инструмент покажет, какие функции занимают больше всего времени в основном потоке.
Минимизируйте размер DOM: страницы с тысячами узлов медленнее реагируют на любые изменения.

CLS: как устранить сдвиги вёрстки

Высокий CLS — одна из самых раздражающих проблем для пользователей: текст прыгает, кнопки смещаются в момент нажатия. Причины:

Изображения без размеров. Если браузер не знает размер изображения заранее, он резервирует нулевое место, а потом сдвигает контент.
Встраиваемый контент без фиксированных размеров: iframe, видео, рекламные блоки.
Веб-шрифты. При замене системного шрифта на загруженный вёрстка может «прыгнуть». Решение: font-display: swap с заранее подобранными fallback-шрифтами схожего размера.
Динамически вставляемый контент выше видимой области.

Основное правило: всегда резервируйте место под контент до его загрузки. Для изображений — атрибуты width/height. Для блоков с динамическим контентом — CSS-правило aspect-ratio или фиксированная высота.

Приоритизация страниц для оптимизации

Не нужно оптимизировать сразу все страницы. Сосредоточьтесь на страницах с наибольшим трафиком и на тех, которые Google Search Console помечает как «Требует улучшения» или «Плохой». Улучшение нескольких ключевых шаблонов (главная, категория, карточка товара) часто распространяется на сотни похожих страниц.

Частые ошибки при оптимизации CWV

Ориентироваться только на лабораторные данные. PageSpeed Insights в лабораторном режиме тестирует с медленного соединения и может давать результаты, далёкие от реального опыта пользователей.
Оптимизировать только десктоп. Google использует Mobile First Indexing — метрики мобильных устройств важнее.
Игнорировать сторонние скрипты. Пиксели аналитики, чаты, виджеты обратного звонка часто вносят значительный вклад в плохие INP и LCP.
Не измерять после изменений. После каждой оптимизации проверяйте метрики снова — иногда одно улучшение ухудшает другую метрику.

Зарегистрируйтесь на seotoolse.ru — 1000 токенов бесплатно, без карты.