Largest Contentful Paint (LCP) является важной метрикой ориентированной на пользователя. LCP замеряет время до отрисовки самого большого содержимого в видимой части экрана, LCP помогает убедить пользователя в том, что страница полезна.
Исторически веб-разработчикам было непросто измерить, насколько быстро загружается и виден пользователям основной контент веб-страницы.
Старые метрики, такие как load или DOMContentLoaded, не годятся потому что они не соответствуют тому, что видит пользователь на своем экране. И более новые, ориентированные на пользователя показатели производительности, такие как First Contentful Paint (FCP) отражают только начало процесса загрузки. Если на странице отображается заставка или отображается индикатор загрузки, этот момент не очень важен для пользователя.
В прошлом мы рекомендовали такие метрики как First Meaningful Paint (FMP) и Speed Index (SI). Чтобы помочь получить больше информации о загрузке после ее начала, но эти метрики сложны и их трудно объяснить. Так же они часто ошибочны — это означает что они по-прежнему не определяют, когда было загружено основное содержимое страницы.
Иногда проще-значит лучше. Основываясь на обсуждениях в W3C web и Performance Working Group исследованиях проведенных в Google, мы обнаружили что более точный способ измерить, когда загружается основное содержимое страницы — это посмотреть, когда был отрисован самый большой элемент.
Что такое LCP?
Содержание
Метрика Largest Contentful Paint (LCP) сообщает о времени визуализации самого большого элемента содержимого, видимого в области просмотра.
Что такое хороший результат LCP?
Чтобы обеспечить хороший пользовательский опыт, сайты должны стремиться к тому чтобы самое большое содержание появлялось в течение первых 2,5 секунд от начала начала загрузки страницы. Чтобы убедиться, что вы достигаете этой цели для большинства своих пользователей, хорошим порогом для измерения станет 75% загрузки страниц, сегментированный на мобильные и настольные устройства.
Какие элементы рассматриваются?
Как в настоящее время указано в Largest Contentful Paint API, стоит обратить внимание на:
- img элементы
- image элементы внутри элемента svg
- video элементы (используется изображение плаката)
- Элемент с фоновым изображением, загруженным через CSS
- Элементы уровня блока, содержащие текстовые узлы или другие дочерние текстовые элементы встроенного уровня.
Обратите внимание, что ограничение элементов этим ограниченным набором было преднамеренным для того, чтобы вначале было проще. Дополнительные элементы (например svg, video) могут быть добавлены в будущем по мере проведения дополнительных исследований.
Как определяется размер элемента?
Размер элемента, указанного для Largest Contentful Paint, обычно равен размеру который виден пользователю в области просмотра. Если элемент выходит за пределы области просмотра или если какой-либо элемент обрезан или имеет невидимое переполнение, эти порции не учитываются при определении размера элемента.
Для элементов изображения, размер которых был изменен от их собственного размера, учитывается размер который является либо видимым либо внутренним размером, в зависимости от того что меньше. Например, изображения сжатые до намного меньшего размера (чем их собственный размер) будут сообщать только размер который они отображают, тогда как изображения растянутые или расширенные до большего размера, будут сообщать только о своих собственных размерах.
Для текстовых элементов учитывается только размер их текстовых узлов (самый маленький прямоугольник, охватывающий все текстовые узлы).
Для всех элементов любые поля, отступы или границы, применяемые через CSS не учитываются.
