The renderTime
read-only property of the LargestContentfulPaint
interface represents the time that the element was rendered to the screen.
The renderTime
property can have the following values:
- A
timestamp
representing the time in milliseconds that the element was rendered to the screen. -
0
if the resource is a cross-origin request and no Timing-Allow-Origin
HTTP response header is used.
This example uses a PerformanceObserver
notifying of new largest-contentful-paint
performance entries as they are recorded in the browser's performance timeline. The buffered
option is used to access entries from before the observer creation.
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log(lastEntry.renderTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });
For security reasons, the value of the renderTime
property is 0
if the resource is a cross-origin request. Instead the loadTime
is exposed. To expose cross-origin render time information, the Timing-Allow-Origin
HTTP response header needs to be set.
For example, to allow https://developer.mozilla.org
to see renderTime
, the cross-origin resource should send:
Alternatively, you can use startTime
which returns the value of the entry's renderTime
if it is not 0
, and otherwise the value of this entry's loadTime
. However, it is recommended to set the Timing-Allow-Origin
header so that the metrics will be more accurate.
If you use startTime
, you can flag any inaccuracies by checking if renderTime
was used:
const isAccurateLCP = entry.renderTime ? true : false;