Производительность
Core Web Vitals: что означают LCP, INP и CLS
Core Web Vitals — три показателя удобства страницы для реального посетителя: как быстро появился главный блок, как скоро страница ответила на действие и не прыгала ли вёрстка. Хорошие ориентиры Google: LCP не дольше 2,5 секунды, INP не дольше 200 миллисекунд, CLS не выше 0,1. Оценивают не один удачный запуск, а опыт большинства пользователей.
Что показывают три метрики
LCP, или Largest Contentful Paint, отмечает момент, когда на экране появился крупнейший видимый блок содержимого: например, заголовок с иллюстрацией или большая фотография товара. Если сервер ответил быстро, но главный блок долго не показывается из-за изображения или скрипта, TTFB может быть хорошим, а LCP — плохим.
INP, или Interaction to Next Paint, описывает задержку отклика на действия: нажатие, касание и ввод с клавиатуры. CLS, или Cumulative Layout Shift, суммирует неожиданные сдвиги содержимого. Например, текст уезжает вниз, когда картинка получила размер только после загрузки. Скорость загрузки и устойчивость макета поэтому проверяют отдельно.
Какие значения считать хорошими
Google относит к хорошему опыту LCP до 2,5 секунды, INP до 200 миллисекунд и CLS до 0,1 включительно. Для оценки берут 75-й процентиль, отдельно для телефонов и компьютеров. Это означает, что ориентир должен выполняться у большей части посещений, а не только на быстром ноутбуке редактора.
Не превращайте границы в обещание роста позиций. Поисковик учитывает множество сигналов, а три метрики не заменяют полезный ответ на запрос. Если один показатель вышел за ориентир, сначала исправьте наиболее неприятную для посетителя проблему на важных шаблонах страниц.
Где посмотреть данные своего сайта
Введите конкретный URL в PageSpeed Insights. Верхний блок показывает данные реальных пользователей Chrome за скользящие 28 дней, если выборки достаточно. Ниже Lighthouse запускает лабораторную проверку и предлагает диагностические подсказки. Если данных по URL нет, инструмент может показать данные всего сайта или не показать пользовательский блок вообще.
В Google Search Console отчёт Core Web Vitals группирует похожие страницы по состоянию. Сравните его с конкретным URL: типовая карточка товара и главная могут тормозить по разным причинам. Один лабораторный балл после правки не доказывает, что реальным посетителям стало лучше; повторите замер и дождитесь обновления пользовательских данных.
Как исправлять плохой LCP
Посмотрите, какой элемент стал крупнейшим. Если это фотография первого экрана, отдайте подходящий размер и формат, проверьте её приоритет загрузки и не откладывайте её ленивой загрузкой. Если большая часть ожидания происходит до HTML, исследуйте ответ сервера и цепочки редиректов. Общее руководство по порядку работ — в статье «Как ускорить сайт».
Учебный пример: магазин показывает на телефоне баннер шириной 360 пикселей, но загружает файл шириной 3000 пикселей после тяжёлого скрипта. Начните с правильного размера файла и порядка загрузки. Если после этого баннер всё равно появляется поздно, изучайте CSS и JavaScript, которые блокируют первый экран.
Как исправлять плохие INP и CLS
Для INP проверьте, что происходит сразу после нажатия медленной кнопки. Тяжёлый обработчик, длинная задача JavaScript или лишний рендер могут задерживать следующий кадр. Уберите ненужную работу с основного потока, разбейте тяжёлые вычисления и сохраните правильное действие кнопки. Лабораторный показатель Total Blocking Time помогает искать причину, но не равен реальному INP.
Для CLS задайте ширину и высоту изображений, оставьте место под рекламу и виджеты до их появления, не вставляйте новый блок над уже читаемым текстом. Проверьте мобильную страницу: скачок от рекламного блока там заметнее. Не скрывайте симптом фиксированной высотой, которая обрезает содержимое.
Как проверить результат
Запишите до правки URL, устройство, три значения из пользовательского блока и вероятную причину. После исправления повторите лабораторную диагностику и проверьте страницу руками: нажмите кнопки, прокрутите первый экран, дождитесь изображений. Для CLS полезно наблюдать, сдвигается ли место нажатия.
Через несколько недель вернитесь к данным реальных пользователей за новый период и сравните те же шаблоны страниц. Если выбранный URL малопосещаем и пользовательского блока нет, не выдумывайте показатель: используйте лабораторную диагностику и собственные измерения, прямо отмечая их ограничения.
Первоисточники
FAQ
Частые вопросы
Что означает отсутствие данных реальных пользователей?
Для URL или всего сайта может не хватать наблюдений Chrome. Это не оценка скорости; используйте лабораторную диагностику и собственные измерения с пометкой об ограничении.
Можно ли считать один зелёный запуск доказательством?
Нет. Один лабораторный запуск помогает искать ошибки, а пользовательский опыт оценивают по многим посещениям за период.
Входят ли TTFB и FCP в Core Web Vitals?
Нет. Три основные метрики Core Web Vitals — LCP, INP и CLS; TTFB и FCP помогают дополнительно разбирать загрузку.
Проверьте себя
Вопрос 1 из 2. Результат увидите только вы.
Обсуждение
Какая из трёх проблем заметнее на вашем сайте: поздний главный блок, медленная реакция или скачки вёрстки?
Войдите, чтобы оставить комментарий. Читать обсуждение могут все. Комментарии проходят автоматическую и редакционную проверку.