LargestContentfulPaint: свойство renderTime

Чтение-только свойство renderTime интерфейса LargestContentfulPaint представляет время, когда элемент был отображён на экране.

Свойство renderTime может иметь следующие значения:

• Значение timestamp, представляющее время в миллисекундах, когда элемент был отображён на экране.
• 0 если ресурс является запросом с другого домена и заголовок ответа HTTP Timing-Allow-Origin не используется.

Этот пример использует PerformanceObserver, оповещающий о новых записях производительности largest-contentful-paint по мере их записи в временной шкале производительности браузера. Используется опция buffered для доступа к записям, созданным до создания наблюдателя.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.renderTime);
});
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;