Core Web Vitals простыми словами: LCP, INP и CLS

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

Разберём каждую метрику без лишней терминологии.

LCP — когда появляется главное

Largest Contentful Paint — время, за которое на экране отрисовывается самый крупный элемент первого экрана: обычно это главное изображение, баннер или большой заголовок.

Ориентир: до 2,5 секунды.

Что ухудшает LCP

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

Как улучшить

• сжимать изображения и использовать WebP;
• для главного изображения не включать lazy-load и задавать высокий приоритет загрузки;
• кешировать страницы и запросы к базе на сервере;
• подключать только нужные шрифты и стили.

INP — как быстро сайт откликается

Interaction to Next Paint — показатель отзывчивости. Он измеряет задержку между действием пользователя (клик, нажатие клавиши, тап) и обновлением экрана. В 2024 году INP заменил прежнюю метрику FID.

Ориентир: до 200 миллисекунд.

Что ухудшает INP

• большие JavaScript-бандлы, которые долго выполняются;
• тяжёлые сторонние скрипты: виджеты чатов, трекеры, рекламные коды;
• обработчики событий, которые выполняют сложные вычисления прямо в момент клика.

Как улучшить

• убирать неиспользуемые скрипты и библиотеки;
• загружать сторонние виджеты отложенно;
• разбивать долгие задачи на части;
• формировать содержимое страницы на сервере, чтобы браузеру не приходилось строить всё самому.

CLS — не прыгает ли вёрстка

Cumulative Layout Shift — суммарное смещение элементов во время загрузки. Знакомая ситуация: вы собираетесь нажать на ссылку, но в этот момент сверху подгружается баннер, текст съезжает, и вы попадаете не туда.

Ориентир: не более 0,1.

Что ухудшает CLS

• изображения и видео без указанных размеров;
• баннеры и блоки, которые вставляются над уже отрисованным контентом;
• веб-шрифты, которые при загрузке заметно меняют размер текста.

Как улучшить

• всегда указывать ширину и высоту изображений или задавать пропорции через CSS;
• резервировать место под динамические блоки;
• использовать font-display: swap и шрифты с похожими метриками.

Полевые и лабораторные данные: в чём разница

Это важный момент, который часто путают.

• Полевые данные собираются у реальных пользователей Chrome. Google оценивает их по 75-му процентилю: метрика считается хорошей, если три четверти посещений укладываются в норму. Эти данные видны в отчёте Core Web Vitals в Search Console и в блоке «Данные о реальных пользователях» в PageSpeed Insights. Для небольших и новых сайтов их может не быть — не хватает посещений.
• Лабораторные данные — результат проверки в Lighthouse на эмулированном устройстве и соединении. Они удобны для диагностики, но не равны реальному опыту пользователей.

Поэтому оценка «90 баллов в PageSpeed» не гарантирует хороших полевых метрик, и наоборот. Для принятия решений смотрите на полевые данные, а лабораторные используйте, чтобы найти причины проблем.

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

1. Откройте PageSpeed Insights и введите адрес страницы. Проверьте отдельно мобильную и десктопную версию.
2. Посмотрите отчёт Core Web Vitals в Google Search Console — он группирует страницы с одинаковыми проблемами.
3. В Chrome откройте инструменты разработчика, вкладку Lighthouse, и запустите проверку — так удобно смотреть результат после каждого исправления.

Как Core Web Vitals связаны с заявками

Метрики кажутся техническими, но за каждой стоит поведение реального человека. Если первый экран страницы услуги появляется через пять секунд, часть посетителей не дождётся его и закроет вкладку — вы заплатили за клик в рекламе или заработали позицию в поиске, но клиента не получили. Если кнопка «Отправить заявку» реагирует с задержкой, человек нажимает повторно и не понимает, ушла ли заявка. Если при загрузке форма сдвигается, он может случайно нажать на соседнюю ссылку и уйти со страницы.

Поэтому улучшение Core Web Vitals почти всегда даёт эффект и за пределами SEO: растёт доля посетителей, которые дочитывают страницу и оставляют обращение. Особенно это заметно на мобильном трафике, где соединение и мощность устройства ограничены.

С чего начинать оптимизацию

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

Если сайт построен на тяжёлом шаблоне или конструкторе с десятками плагинов, иногда точечная оптимизация даёт мало эффекта. Тогда разумнее сделать новый сайт с лёгкой вёрсткой и серверным рендерингом.

Итог

Core Web Vitals — это не абстрактные баллы, а конкретные ощущения посетителя: быстро ли появилась страница, откликается ли кнопка, не прыгает ли текст. Хорошие показатели помогают и SEO, и конверсии. Я закладываю их при разработке сайтов и улучшаю на существующих проектах в рамках технической поддержки. Если ваш сайт медленно работает на телефоне, оставьте заявку — проверю и подскажу, что исправить.