Largest Contentful Paint (LCP) — это стабильная метрика Core Web Vital для измерения воспринимаемой скорости загрузки . Он отмечает точку на временной шкале загрузки страницы, когда, вероятно, загрузился основной контент страницы. Быстрый LCP помогает убедить пользователя в полезности страницы.
Исторически сложилось так, что веб-разработчикам было непросто измерить, насколько быстро основное содержимое веб-страницы загружается и становится видимым пользователям. Старые метрики, такие как загрузка или DOMContentLoaded , не работают должным образом, поскольку они не обязательно соответствуют тому, что пользователь видит на своем экране. А новые, ориентированные на пользователя показатели производительности, такие как First Contentful Paint (FCP), фиксируют только самое начало процесса загрузки. Если на странице отображается заставка или индикатор загрузки, этот момент не очень важен для пользователя.
Раньше мы рекомендовали такие показатели производительности, как «Первая значимая отрисовка» (FMP) и «Индекс скорости» (SI) (оба доступны в Lighthouse), чтобы помочь лучше понять процесс загрузки после первоначальной отрисовки, но эти показатели сложны и их трудно объяснить. , и часто ошибаются, то есть они по-прежнему не определяют, когда загрузился основной контент страницы.
Основываясь на обсуждениях в рабочей группе W3C по веб-производительности и исследованиях, проведенных в Google, мы обнаружили, что более точный способ измерить время загрузки основного содержимого страницы — это посмотреть, когда отображается самый большой элемент.
Что такое ЛКП?
LCP сообщает время рендеринга самого большого изображения или текстового блока, видимого в области просмотра, относительно времени, когда пользователь впервые перешел на страницу.
Что такое хороший показатель LCP?
Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы LCP составляло 2,5 секунды или меньше. Чтобы гарантировать достижение этой цели для большинства ваших пользователей, хорошим порогом для измерения является 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.
Какие элементы считаются?
Как указано в API Largest Contentful Paint , типы элементов, рассматриваемых для Largest Contentful Paint:
- Элементы
<img>( время представления первого кадра используется для анимированного контента, такого как GIF или анимированные PNG) - Элементы
<image>внутри элемента<svg> - Элементы
<video>(используется время загрузки изображения постера или время представления первого кадра видео — в зависимости от того, что наступит раньше) - Элемент с фоновым изображением, загруженным с помощью функции
url()(в отличие от градиента CSS ). - Элементы уровня блока , содержащие текстовые узлы или другие дочерние текстовые элементы строчного уровня.
Ограничение элементов этим ограниченным набором было сделано намеренно, чтобы уменьшить сложность. Дополнительные элементы (например, полная поддержка <svg> ) могут быть добавлены в будущем по мере проведения дополнительных исследований.
Помимо рассмотрения только некоторых элементов, измерения LCP используют эвристику для исключения определенных элементов, которые пользователи могут счесть «несодержательными». Для браузеров на базе Chromium к ним относятся:
- Элементы с непрозрачностью 0, что делает их невидимыми для пользователя.
- Элементы, закрывающие всю область просмотра, которые, скорее всего, будут фоновыми элементами.
- Изображения-заполнители или другие изображения с низкой энтропией, которые, вероятно, не отражают истинное содержание страницы.
Браузеры, скорее всего, продолжат совершенствовать эту эвристику, чтобы гарантировать соответствие ожиданиям пользователей относительно самого крупного элемента контента .
Эти «содержательные» эвристики отличаются от тех, которые используются FCP , который может учитывать некоторые из этих элементов, такие как изображения-заполнители или изображения полного окна просмотра, даже если они не могут быть кандидатами на LCP. Несмотря на то, что оба используют слово «содержательный» в своем названии, цель этих показателей разная. FCP измеряет момент отображения какого-либо контента на экране, тогда как LCP измеряет момент отображения основного контента .
Как определяется размер элемента?
Размер элемента, сообщаемый для LCP, обычно равен размеру, который виден пользователю в области просмотра. Если элемент выходит за пределы области просмотра, или если какой-либо элемент обрезан или имеет невидимое переполнение , эти части не учитываются при расчете размера элемента.
Для элементов изображения, размер которых был изменен по сравнению с их внутренним размером , сообщается либо видимый размер, либо внутренний размер, в зависимости от того, какой из них меньше.
Для текстовых элементов LCP рассматривает только наименьший прямоугольник, который может содержать все текстовые узлы.
Для всех элементов LCP не учитывает поля, отступы или границы, примененные с помощью CSS.
Когда сообщается о LCP?
Веб-страницы часто загружаются поэтапно, и в результате самый большой элемент на странице может измениться во время загрузки.
Чтобы справиться с этой возможностью изменения, браузер отправляет PerformanceEntry типа largest-contentful-paint идентифицирующий самый большой элемент содержимого, как только браузер нарисовал первый кадр. После рендеринга последующих кадров он отправляет еще один PerformanceEntry каждый раз, когда изменяется самый большой элемент содержимого.
Например, на странице с текстом и главным изображением браузер может изначально отображать только текст и отправлять запись largest-contentful-paint , свойство element которой ссылается на <p> или <h1> . После завершения загрузки главного изображения отправляется вторая largest-contentful-paint со свойством element , ссылающимся на <img> .
Элемент может считаться самым большим элементом содержимого только после того, как он отрисован и виден пользователю. Изображения, которые еще не загружены, не считаются «отрисованными». Текстовые узлы также не используют веб-шрифты в период блокировки шрифтов . В таких случаях меньший элемент может быть указан как самый большой элемент с содержимым, но как только больший элемент завершит отрисовку, будет создан другой PerformanceEntry .
Помимо поздней загрузки изображений и шрифтов, страница может добавлять новые элементы в DOM по мере появления нового контента. Если какой-либо из этих новых элементов больше, чем предыдущий элемент с наибольшим содержимым, создается новый элемент PerformanceEntry .
Если самый большой элемент с содержимым удаляется из области просмотра или даже из DOM, он остается самым большим элементом с содержимым, пока не будет отображен более крупный элемент.
Браузер перестает сообщать о новых записях, как только пользователь взаимодействует со страницей (нажатием, прокруткой или нажатием клавиши), поскольку взаимодействие с пользователем часто меняет то, что видит пользователь (особенно при прокрутке).
В целях анализа сообщайте в службу аналитики только самые последние отправленные PerformanceEntry .
Время загрузки и время рендеринга
По соображениям безопасности метка времени рендеринга изображений не отображается для изображений из разных источников, у которых отсутствует заголовок Timing-Allow-Origin . Вместо этого доступно только время загрузки, которое уже предоставляют другие API.
Это может привести к, казалось бы, невозможной ситуации, когда веб-API сообщает о LCP раньше, чем о FCP. Это происходит только из-за ограничения безопасности и не отражает того, что происходит на самом деле.
По возможности мы всегда рекомендуем устанавливать заголовок Timing-Allow-Origin , чтобы сделать ваши показатели более точными.
Как обрабатываются изменения макета и размера элемента?
Чтобы снизить накладные расходы на вычисление и отправку новых записей производительности, изменения размера или положения элемента не создают новых кандидатов LCP. Учитывается только начальный размер и положение элемента в области просмотра.
Это означает, что изображения, которые изначально отображаются за кадром, а затем переходят на экран, могут не сообщаться. Это также означает, что элементы, первоначально отображаемые в области просмотра, а затем вытесняемые из поля зрения, по-прежнему сообщают о своем первоначальном размере в области просмотра.
Примеры
Вот несколько примеров того, когда на нескольких популярных веб-сайтах происходит самая большая содержательная отрисовка:
На обеих временных шкалах самый крупный элемент (выделен зеленым) изменяется по мере загрузки контента. В первом примере в DOM добавляется новый контент, изменяя, какой элемент является самым большим. Во втором примере макет изменяется, удаляя предыдущий самый большой элемент контента из области просмотра.
Хотя контент, загружаемый с опозданием, часто больше, чем контент, уже находящийся на странице, это не обязательно так. Следующие два примера показывают, что LCP происходит до полной загрузки страницы.
В первом примере логотип Instagram загружается относительно рано и остается самым крупным элементом даже при добавлении другого контента. В примере страницы результатов поиска Google самым большим элементом является абзац текста, который отображается до завершения загрузки любого изображения или логотипа. Поскольку каждое отдельное изображение меньше этого абзаца, оно остается самым крупным элементом на протяжении всего процесса загрузки.
Как измерить ЛКП
LCP можно измерить в лаборатории или в полевых условиях , и он доступен в следующих инструментах:
Полевые инструменты
- Отчет об опыте использования Chrome
- Статистика PageSpeed
- Search Console (отчет «Основные веб-показатели»)
- JavaScript-библиотека
web-vitals
Лабораторные инструменты
Измерение LCP в JavaScript
Чтобы измерить LCP в JavaScript, используйте Largest Contentful Paint API . В следующем примере показано, как создать PerformanceObserver , который прослушивает записи с largest-contentful-paint и записывает их в консоль.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
В предыдущем примере каждая зарегистрированная запись largest-contentful-paint представляет текущего кандидата LCP. Обычно значение startTime последней созданной записи является значением LCP. Однако не все записи largest-contentful-paint действительны для измерения LCP.
В следующем разделе перечислены различия между тем, что сообщает API, и тем, как рассчитывается метрика.
Различия между метрикой и API
- API отправляет записи
largest-contentful-paintдля страниц, загруженных на фоновую вкладку, но эти страницы следует игнорировать при вычислении LCP. - API продолжает отправлять записи
largest-contentful-paintпосле того, как страница была фоновой, но эти записи следует игнорировать при вычислении LCP. Элементы можно считать только в том случае, если страница все время находилась на переднем плане. - API не сообщает о записях
largest-contentful-paintкогда страница восстанавливается из обратного/прямого кэша , но в этих случаях следует измерять LCP, поскольку пользователи воспринимают их как отдельные посещения страниц. - API не учитывает элементы внутри iframe, но метрика учитывает, поскольку они являются частью взаимодействия пользователя со страницей. На страницах с LCP внутри iframe — например, на постере во встроенном видео — это будет отображаться как разница между CrUX и RUM . Чтобы правильно измерить LCP, необходимо включить iframe. Подкадры могут использовать API для передачи своих записей
largest-contentful-paintв родительский фрейм для агрегирования. - API измеряет LCP с момента начала навигации. Для предварительно обработанных страниц вместо этого измеряйте LCP от
activationStart, поскольку это соответствует времени LCP, которое ощущает пользователь.
Вместо того, чтобы запоминать все эти тонкие различия, мы рекомендуем разработчикам использовать библиотеку JavaScript web-vitals для измерения LCP, которая обрабатывает большинство этих различий за вас. (Это не касается проблемы iframe.)
import {onLCP} from 'web-vitals';
// Measure and log LCP as soon as it's available.
onLCP(console.log);
Полный пример измерения LCP в JavaScript можно найти в исходном коде onLCP() .
Что, если самый большой элемент не является самым важным?
В некоторых случаях наиболее важный элемент (или элементы) на странице не совпадает с самым большим элементом, и вместо этого разработчики могут быть более заинтересованы в измерении времени рендеринга этих других элементов. Это возможно с помощью Element Timing API , как описано в статье о пользовательских метриках .
Как улучшить ЛКП
Доступно полное руководство по оптимизации LCP , которое поможет вам определить сроки LCP в полевых условиях и использовать лабораторные данные для их детализации и оптимизации.
Дополнительные ресурсы
- Уроки, извлеченные из мониторинга производительности в Chrome, автор Энни Салливан на Performance.now() (2019)
Журнал изменений
Иногда ошибки обнаруживаются в API, используемых для измерения метрик, а иногда и в определениях самих метрик. В результате иногда приходится вносить изменения, и эти изменения могут проявляться в виде улучшений или регрессов в ваших внутренних отчетах и информационных панелях.
Чтобы помочь вам справиться с этим, все изменения в реализации или определении этих показателей отображаются в этом журнале изменений .
Если у вас есть отзывы об этих показателях, оставьте их в группе Google web-vitals-feedback .