Короткое определение
LCP измеряет скорость появления основного контента, INP - задержку реакции страницы на действия пользователя, CLS - визуальную стабильность макета во время загрузки и работы страницы.
Какие нормы считаются хорошими
Для Core Web Vitals Google использует понятные пороги качества. Хорошим считается LCP до 2,5 секунды, INP до 200 миллисекунд и CLS до 0,1. Пограничная зона: LCP от 2,5 до 4 секунд, INP от 200 до 500 миллисекунд, CLS от 0,1 до 0,25. Все, что хуже, требует внимания.
Что показывает LCP
LCP, или Largest Contentful Paint, показывает момент, когда на экране появился крупнейший содержательный элемент. На странице услуги это может быть главный заголовок или hero-блок, на карточке товара - фотография товара, на категории - первый крупный блок каталога, на статье - заголовок и основной текст.
Плохой LCP чаще всего связан с медленным серверным ответом, тяжелым изображением первого экрана, блокирующим CSS, поздней загрузкой шрифтов, лишним JavaScript или слабым кешированием. В SEO-аудите важно не просто увидеть плохую метрику, а найти конкретный LCP-элемент и причину задержки.
Что показывает INP
INP, или Interaction to Next Paint, измеряет отзывчивость страницы. Пользователь нажимает кнопку, открывает меню, вводит текст, выбирает фильтр, отправляет форму или добавляет товар в корзину. INP показывает, сколько времени проходит до видимой реакции интерфейса.
Плохой INP часто появляется из-за тяжелого JavaScript, длинных задач в основном потоке, сложных фильтров, перегруженных форм, чатов, коллтрекинга, аналитики и рекламных скриптов. В отличие от LCP, проблема INP может быть почти незаметна при первом взгляде на страницу, но сильно бить по заявкам.
Что показывает CLS
CLS, или Cumulative Layout Shift, оценивает визуальную стабильность. Если пользователь собирается нажать кнопку, а блок внезапно сдвигается из-за загрузившегося баннера или шрифта, это ухудшает CLS и раздражает пользователя.
Частые причины плохого CLS: изображения без заданных размеров, рекламные блоки без зарезервированного места, виджеты чата, динамически вставленные формы, поздняя подгрузка отзывов, нестабильные web fonts и блоки рекомендаций, которые появляются над уже видимым контентом.
Чем отличаются полевые и лабораторные данные
Лабораторные данные получают в контролируемом тесте. Они помогают разработчику повторить проблему и понять причины: сетевые запросы, блокирующие ресурсы, длинные задачи, порядок загрузки. Полевые данные собираются у реальных пользователей и показывают, как страница работает на разных устройствах, сетях и браузерах.
Для SEO приоритетнее полевые данные, потому что именно они отражают пользовательский опыт. Но исправлять проблему удобнее через лабораторную диагностику. Практический подход простой: полевые данные показывают, где болит, лабораторные помогают понять, чем лечить.
Как диагностировать LCP, INP и CLS
Начинать стоит с групп URL, а не с одной случайной страницы. Проверяются шаблоны: главная, услуги, категории, карточки, статьи, фильтры, корзина и формы. Затем метрика связывается с причиной: для LCP смотрят сервер, первый экран, изображения и CSS; для INP - JavaScript, обработчики и сторонние скрипты; для CLS - размеры элементов и динамические вставки.
После этого задачи нужно приоритизировать. Если плохой CLS найден только на старой статье без трафика, он не должен опережать LCP на странице услуги. Если INP проседает на форме заявки или фильтре каталога, это уже влияет не только на SEO, но и на конверсию.
Частые ошибки
- смотреть только общий PageSpeed score и не понимать, какая метрика просела;
- делать вывод по одному тесту, не проверяя реальные данные пользователей;
- оптимизировать десктоп, когда основной трафик и проблемы находятся на мобильных;
- сжимать второстепенные картинки, но не трогать LCP-элемент первого экрана;
- игнорировать чаты, виджеты, карты, аналитику и рекламные скрипты;
- не резервировать место под изображения, баннеры, формы и динамические блоки;
- не фиксировать дату внедрения и не сравнивать данные до и после правок.
Чек-лист LCP, INP и CLS
- Проверьте LCP, INP и CLS в Search Console или PageSpeed Insights по mobile и desktop.
- Определите, какие шаблоны дают проблему: услуги, категории, карточки, статьи, формы.
- Для LCP найдите крупнейший элемент и проверьте сервер, изображение, CSS, шрифты и кеш.
- Для INP протестируйте клики, меню, фильтры, формы, поиск, корзину и сторонние скрипты.
- Для CLS проверьте размеры изображений, место под виджеты, баннеры, шрифты и динамические блоки.
- Свяжите каждую задачу с влиянием на трафик, заявку, заказ или важный шаблон.
- После релиза проверьте полевые данные, а не только лабораторный отчет.
FAQ
Какие значения LCP, INP и CLS считаются хорошими?
Хорошие ориентиры Core Web Vitals: LCP до 2,5 секунды, INP до 200 миллисекунд, CLS до 0,1. Оценивать нужно 75-й процентиль реальных пользователей.
Что показывает LCP?
LCP показывает, когда на экране загрузился крупнейший содержательный элемент: hero-изображение, крупный заголовок, фото товара, список товаров или основной текстовый блок.
Что показывает INP?
INP показывает, насколько быстро страница реагирует на действия пользователя: клики, ввод, раскрытие меню, фильтры, CTA, формы и корзину.
Что показывает CLS?
CLS показывает визуальную стабильность: прыгает ли макет из-за изображений без размеров, шрифтов, баннеров, чатов, рекламы или динамически вставленных блоков.
Что почитать дальше?
Посмотрите справку что такое Core Web Vitals и подробный материал Core Web Vitals и SEO.