LargestContentfulPaint

Интерфейс LargestContentfulPaint предоставляет информацию о времени отрисовки самого большого изображения или текста перед вводом пользователя на веб-странице.

Ключевой момент, предоставляемый этим API, — метрика Largest Contentful Paint (LCP). Она предоставляет время отрисовки самого большого блока изображения или текста, видимого в области просмотра, начиная с момента начала загрузки страницы. При определении LCP учитываются следующие элементы:

• <img> элементы.
• <image> элементы внутри SVG.
• Изображения-постеры элементов <video>.
• Элементы с background-image.
• Группы узлов текста, такие как <p>.

Для измерения времени отрисовки других элементов используйте API PerformanceElementTiming.

Дополнительные ключевые моменты отрисовки предоставляются API PerformancePaintTiming:

• Первая отрисовка (FP): Время, когда что-либо отрисовывается. Обратите внимание, что маркировка первой отрисовки необязательна, не все пользовательские агенты её сообщают.
• Первая отрисовка содержимого (FCP): Время, когда первый фрагмент текстового или графического содержимого DOM отрисовывается.

LargestContentfulPaint наследуется от PerformanceEntry.

Этот интерфейс расширяет следующие свойства PerformanceEntry, квалифицируя и ограничивая свойства следующим образом:

PerformanceEntry.entryType Только для чтения Экспериментальная

Возвращает "largest-contentful-paint".

PerformanceEntry.name Только для чтения Экспериментальная

Всегда возвращает пустую строку.

PerformanceEntry.startTime Только для чтения Экспериментальная

Возвращает значение свойства renderTime этого элемента, если оно не 0, в противном случае значение свойства loadTime этого элемента.

PerformanceEntry.duration Только для чтения Экспериментальная

Возвращает 0, так как duration не применимо к этому интерфейсу.

Также поддерживаются следующие свойства:

LargestContentfulPaint.element Только для чтения

Элемент, являющийся текущим самым большим отрисованным элементом содержимого.

LargestContentfulPaint.renderTime Только для чтения

Время отрисовки элемента на экране. Может быть недоступно, если элемент — это изображение с запросом с другого домена, загруженное без заголовка Timing-Allow-Origin.

LargestContentfulPaint.loadTime Только для чтения

Время загрузки элемента.

LargestContentfulPaint.size Только для чтения

Внутренние размеры элемента, возвращаемые как площадь (ширина * высота).

LargestContentfulPaint.id Только для чтения

Идентификатор элемента. Это свойство возвращает пустую строку, если идентификатор отсутствует.

LargestContentfulPaint.url Только для чтения

Если элемент — изображение, URL-адрес запроса изображения.

Этот интерфейс также наследует методы от PerformanceEntry.

LargestContentfulPaint.toJSON()

Возвращает JSON-представление объекта LargestContentfulPaint.

В следующем примере регистрируется наблюдатель для получения самого большого отрисованного элемента содержимого во время загрузки страницы. Флаг buffered используется для доступа к данным до создания наблюдателя.

API LCP анализирует всё найденное содержимое (включая содержимое, удалённое из DOM). При обнаружении нового наибольшего содержимого создаётся новая запись. Поиск завершается при возникновении событий прокрутки или ввода, так как эти события, вероятно, приведут к появлению нового содержимого на сайте. Таким образом, LCP — это последняя запись производительности, сообщённая наблюдателем.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log("LCP:", lastEntry.startTime);
  console.log(lastEntry);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

По соображениям безопасности, значение свойства renderTime изначально 0 если ресурс является запросом с другого домена. Вместо этого следует использовать свойство loadTime в качестве резервного варианта.

Браузеры могут теперь предоставлять несколько грубоватое значение времени отрисовки в этих ситуациях. Проверьте поддержку браузера здесь.

Для предоставления более точной информации о времени отрисовки ресурсов с другого домена необходимо установить заголовок HTTP Timing-Allow-Origin.

Например, чтобы https://developer.mozilla.org мог получить точное значение renderTime, ресурс с другого домена должен отправить:

Timing-Allow-Origin: https://developer.mozilla.org

Как и в примере кода, вы можете использовать startTime, который возвращает значение свойства renderTime элемента, если оно не 0, в противном случае значение свойства loadTime. Однако рекомендуется устанавливать заголовок Timing-Allow-Origin, чтобы метрики были более точными.

Если вы используете startTime, вы можете отметить любые неточности, проверив, использовался ли renderTime:

const isAccurateLCP = entry.renderTime ? true : false;

• Максимальная загрузка контента
• Первый рендеринг контента
• Первый рендеринг