Web Vitals: что измеряют LCP, INP и CLS

Что это

Core Web Vitals, определённые Google на web.dev, — три ориентированные на пользователя метрики. Largest Contentful Paint (LCP) сообщает время отрисовки самого большого изображения, текстового блока или видео, видимого в области просмотра, относительно начала навигации. Interaction to Next Paint (INP) наблюдает задержку всех кликов, касаний и нажатий клавиш за посещение и сообщает самое долгое наблюдавшееся взаимодействие, исключая выбросы — по одному на каждые 50 взаимодействий. Cumulative Layout Shift (CLS) оценивает неожиданное перемещение видимого содержимого, обычно возникающее при асинхронной загрузке ресурсов или вставке элементов над существующим содержимым. Рекомендуемые ориентиры: LCP в пределах 2.5 секунды, INP не более 200 миллисекунд и CLS не более 0.1, оцениваемые по 75-му перцентилю загрузок страниц с разделением на мобильные и настольные устройства.

Почему это важно

Лабораторные инструменты выполняют одну синтетическую загрузку на одной машине; эти метрики определены на данных реальных пользователей и устройств, отражающих пользовательский опыт. Знание неудачной метрики указывает на причину: LCP — время сервера плюс обнаружение ресурсов и отрисовка; INP — работа главного потока внутри обработчиков событий и после них; CLS — появление содержимого без зарезервированного места.

Как применять

• LCP: быстро отдавайте HTML с помощью кэширования и сжатия, делайте самое большое изображение обнаружимым в исходном HTML вместо отложенной загрузки или вставки скриптом и избегайте блокирующих отрисовку ресурсов перед ним.
• INP: сохраняйте обработчики событий короткими, разбивайте длинные задачи и отдавайте управление главному потоку, откладывайте несрочную работу и поддерживайте небольшой DOM, чтобы расчёт стилей и макета после взаимодействия оставался дешёвым.
• CLS: резервируйте место для изображений, встраиваемых объектов, рекламы и поздно загружаемых компонентов явными размерами или aspect-ratio; никогда не вставляйте содержимое выше того, что читает пользователь, если он сам этого не запросил.
• Измеряйте в реальных условиях через API производительности браузера или библиотеку Google web-vitals и разделяйте данные по типу страницы и классу устройства до выводов.
• Работайте с 75-м перцентилем, а не медианой: быстрая медиана при медленном хвосте всё равно не проходит критерий.

Подводные камни

Улучшение лабораторной оценки без сдвига данных реального использования — обычно потому, что тестовые устройства быстрее пользовательских. Метрики относятся к загрузкам страниц; в одностраничном приложении смена маршрута на клиенте не является новой загрузкой, поэтому привязка к маршрутам требует дополнительных средств измерения. Пороги — рекомендации указанного источника, а не гарантии влияния на позиции в поиске или конверсию.