Core Web Vitals: как выбрать исправление по LCP, INP и CLS

Почему одна оценка не описывает весь сайт

Мини-кейс: у страницы услуг высокий CLS, потому что форма появляется после загрузки виджета и сдвигает кнопку. Резервирование места может решить проблему без удаления формы. Если же задержка связана с тяжелым обработчиком выбора тарифа, оптимизация картинки не улучшит INP. Поэтому заведите отдельную гипотезу для каждой метрики, укажите затронутый шаблон и ожидаемый пользовательский эффект. После выпуска проверьте повторное взаимодействие с формой: ускоренная страница с переставшими работать полями хуже прежней. Для малых страниц без полевых данных не заявляйте доказанное улучшение всей аудитории.

В учебном примере LCP 4,1 секунды у карточки товара и CLS 0,22 от баннера требуют разных исполнителей. Для LCP проверьте, когда браузер обнаружил файл и не помечен ли главный img как lazy; для CLS зарезервируйте место до появления баннера. Улучшение лабораторного прогона одного URL не доказывает, что всем посетителям стало лучше. Смотрите полевые группы URL и удобство оформления заявки.

Разделите полевые и лабораторные измерения

Разделите три метрики: LCP отражает загрузку основного элемента, INP - отклик на взаимодействие, CLS - неожиданное смещение макета. Смотрите группу URL, устройство и доступность полевых данных.

Проверьте, что именно стало LCP-элементом; какая задача блокирует взаимодействие; какой блок сдвигает страницу. Lighthouse дает диагностические подсказки, а полевые данные показывают опыт реальных посещений.

Найдите элемент LCP, задержку INP и сдвиг CLS

Пороговые значения Google относятся к 75-му процентилю посещений: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Эти ориентиры помогают наблюдать UX, но сами по себе не гарантируют позиции.

Выберите исправление по шаблону

Выбирайте исправление по причине и охвату. Поздно обнаруженная обложка требует одного решения, тяжелый обработчик формы - другого, баннер без зарезервированного места - третьего.

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

Сначала определите, какой элемент стал LCP на реальных страницах: обложка, заголовок или баннер. Для INP найдите длительную обработку действия, для CLS - элемент без зарезервированного места. Исправление должно соответствовать измеренному источнику, а не названию метрики.

Не ускоряйте страницу ценой функции

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

Сравните группы URL после релиза

Сравните одинаковые группы URL до и после релиза, дождитесь накопления полевых данных и проверьте, не ухудшилась другая метрика. Отдельно оцените, стало ли удобнее выбрать услугу и отправить заявку.

Сохраните два среза: лабораторный прогон для диагностики и полевые данные для оценки эффекта при достаточном объеме. Сравнивайте один тип страницы и устройство. Рост балла в одном прогоне Lighthouse не доказывает улучшение пользовательского опыта.

Проверка результата

• Намерение страницы определено
• Сохранена выборка URL до исправления
• HTTP-ответ и содержимое сверены
• Внутренние ссылки проверены
• Исключения учтены
• Проверка после релиза записана

Скачать таблицу примера

Вопросы по теме

Читайте также