Core Web Vitals: что значат LCP, INP и CLS и как исправить их простыми шагами

Что такое Core Web Vitals простыми словами

Термин придумал Google. Это набор метрик, которые описывают, что человек чувствует, когда открывает страницу. Не «сколько весит сайт» и не «сколько запросов к серверу», а три понятных ощущения. Описание и нормы — в статье Google на web.dev.

Раньше вместо INP была метрика FID — задержка первого ввода. В 2024 году Google заменил её на INP: она учитывает все нажатия за визит, а не только первое. Если в старой статье или отчёте подрядчика встречается FID, это устаревшие данные.

Важная деталь: метрику считают по 75-му процентилю. Это значит, что сайт проходит проверку, если у трёх из четырёх визитов значение в норме. Один быстрый замер с офисного вайфая ничего не доказывает.

Влияют ли Core Web Vitals на позиции в Яндексе и Google

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

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

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

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

Есть три источника данных. Они показывают разное, поэтому полезно знать, чем отличаются.

1. PageSpeed Insights. Откройте pagespeed.web.dev, вставьте адрес страницы, выберите вкладку «Мобильный телефон». Сверху — блок с данными реальных пользователей Chrome за последние 28 дней, если они есть. Ниже — лабораторный тест и балл от 0 до 100.
2. Search Console. Если сайт добавлен в Google Search Console, там есть отчёт «Основные интернет-показатели». Он группирует страницы по статусу: хорошие, требуют улучшения, плохие. Удобно, когда страниц много.
3. Яндекс Метрика. Отчёт «Время загрузки страниц» в разделе «Мониторинг» показывает, как быстро страницы открываются у ваших посетителей. По справке, для надёжной работы мониторинга нужно больше 100 просмотров в неделю.

Если в PageSpeed написано, что данных реальных пользователей недостаточно, — это нормально для сайта с небольшим трафиком. Тогда смотрите лабораторный тест, но запускайте его 3–4 раза и берите среднее. Балл может отличаться на 10–15 пунктов между запусками, и это не значит, что сайт «сломался».

Как читать результат лабораторного теста: сам балл вторичен. Смотрите на цифры LCP и CLS, а вместо INP в лаборатории показывается похожая метрика — общее время блокировки (Total Blocking Time). Она отвечает на тот же вопрос: занят ли браузер настолько, что не реагирует на нажатия.

Если хотите разобраться в инструментах подробнее, у нас есть отдельная статья: как проверить скорость загрузки сайта с разбором всех пунктов отчёта PageSpeed.

Как улучшить LCP: главный блок первого экрана

LCP почти всегда упирается в один элемент — большую картинку или видео на первом экране. PageSpeed прямо показывает, какой элемент он посчитал крупнейшим: раскройте пункт про LCP в диагностике.

Что делать, по степени отдачи:

• Сжать изображение первого экрана. Фото с телефона весит 3–6 МБ. Для экрана телефона хватит картинки шириной 1 000–1 200 пикселей в формате WebP. Обычно это 100–250 КБ.
• Не прятать главную картинку за ленивой загрузкой. Ленивая загрузка нужна для картинок ниже. Если её включить для первого экрана, браузер начинает грузить главный элемент последним.
• Убрать видеофон на мобильной версии. Видео на фоне — частая причина LCP в 5–8 секунд. На телефоне его можно заменить статичным кадром.
• Проверить сервер. Если до первого байта проходит больше секунды, дело в хостинге или в тяжёлой CMS. Это видно в отчёте как время ответа сервера.
• Сократить чужие скрипты в шапке. Онлайн-чаты, виджеты обратного звонка, квизы, пиксели — каждый тянет свои файлы до того, как покажется контент.

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

Как улучшить INP: почему сайт «не нажимается»

INP плохой, когда браузер занят выполнением скриптов и не успевает отреагировать на нажатие. Человек жмёт «Оставить заявку», а форма открывается через секунду. Он жмёт ещё раз. Открываются две формы или ничего.

Типичные причины на сайтах малого бизнеса:

• три-четыре виджета одновременно: чат, обратный звонок, всплывающее окно со скидкой, кнопка мессенджеров;
• несколько счётчиков аналитики и пикселей рекламных систем, часть из которых уже никто не смотрит;
• тяжёлые слайдеры и анимации при прокрутке;
• квизы и калькуляторы, которые пересчитывают всё на каждое движение.

Что делать:

1. Выпишите все сторонние скрипты на сайте. Для каждого ответьте: кто им пользуется и когда последний раз смотрел данные.
2. Удалите то, чем никто не пользуется. Обычно находится один-два забытых счётчика.
3. Оставшиеся виджеты подключите с задержкой: не при загрузке, а через несколько секунд или после первой прокрутки.
4. Анимации при прокрутке на мобильной версии отключите или упростите.

Здесь есть подвох. Виджет обратного звонка может приносить заявки, и удалять его вслепую нельзя. Сначала посмотрите в Метрике, сколько целей он даёт. Если заметную долю — оставьте, но грузите позже.

Как улучшить CLS: почему блоки прыгают

CLS считает, насколько элементы сдвигаются, пока человек смотрит на страницу. Самый неприятный случай: посетитель тянется к телефону в шапке, а сверху появляется баннер про cookie, и палец попадает в другую ссылку.

Частые причины и решения:

Хорошая новость: CLS обычно исправляется быстрее всего. Это правки вёрстки на час-два, а не переделка сайта.

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

Какие правки дают больше всего: пошаговый план на один день

Порядок важен: сначала то, что дешевле всего и даёт заметный эффект.

1. Замерьте исходное состояние. Три-четыре запуска PageSpeed для главной и для страницы, куда ведёт реклама. Запишите LCP, CLS, общее время блокировки.
2. Сожмите картинки первого экрана и уберите для них ленивую загрузку.
3. Отключите видеофон на мобильной версии или замените его картинкой.
4. Проведите ревизию сторонних скриптов. Удалите неиспользуемые, остальные подключите с задержкой.
5. Задайте размеры изображениям и перенесите плашку cookie вниз поверх контента.
6. Повторите замер теми же способами. Сравнивайте одинаковые страницы в одинаковом режиме.
7. Через 28 дней проверьте данные реальных пользователей в PageSpeed или Search Console — они обновляются с задержкой.

Правило, которое экономит деньги: не гонитесь за баллом 100. Сайт с баллом 70, у которого LCP 2,2 секунды и CLS 0,05, лучше сайта с баллом 95 и формой, которая не работает на Айфоне.

Условный пример: сколько заявок теряет медленный первый экран

Пример условный, цифры подобраны для наглядности.

Допустим, компания по ремонту кухонной техники в Самаре. Реклама в Директе приводит 1 500 человек в месяц по 60 ₽ за клик, бюджет 90 000 ₽. Почти все приходят с телефона. На первом экране — фото мастера весом 4 МБ и видео на фоне. LCP на мобильном — 6 секунд.

По Метрике видно: 30% визитов короче 10 секунд и без прокрутки. Часть этих людей просто не дождалась страницы. Конверсия в заявку — 2%, это 30 заявок по 3 000 ₽.

После правок фото весит 180 КБ, видео на телефоне заменено кадром, чат грузится через пять секунд. LCP упал до 2,3 секунды. Доля коротких визитов снизилась до 20%, конверсия выросла до 2,6%. Это 39 заявок при том же бюджете, заявка подешевела до 2 300 ₽.

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

Когда метрики хорошие, а заявок нет

Бывает и обратная ситуация. Все три метрики зелёные, а сайт не продаёт. Значит, проблема не в скорости. Проверьте:

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

Про это подробно — в статье почему сайт не приносит заявки. Скорость — гигиена. Она не продаёт сама, но её отсутствие убивает продажи.

Чего не делать, когда исправляете Core Web Vitals

Несколько ошибок, которые мы регулярно видим после «оптимизации» силами случайного подрядчика:

• Удалили счётчик Метрики ради балла. Балл вырос на 3 пункта, а реклама перестала обучаться: стратегии Директа учатся на целях Метрики.
• Пережали картинки до мыла. Фото работ превратились в пятна. Для ниш, где продаёт картинка — ремонт, мебель, салоны, — это хуже, чем лишняя секунда загрузки.
• Поставили «плагин ускорения» на CMS без проверки. Он склеил скрипты, и перестала отправляться форма. Через неделю выяснилось, что заявок ноль.
• Оптимизировали главную, а реклама ведёт на другую страницу. Проверяйте те адреса, куда реально приходят люди.

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

Если хотите, чтобы кто-то посмотрел на сайт целиком — скорость, индексацию, мобильную версию и путь заявки, — оставьте контакты. Покажем, что исправить в первую очередь.