LargestContentfulPaint: renderTime-Eigenschaft
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die renderTime
-Eigenschaft der LargestContentfulPaint
-Schnittstelle ist eine schreibgeschützte Eigenschaft, die die Zeit darstellt, zu der das Element auf dem Bildschirm gerendert wurde.
Wert
Die renderTime
-Eigenschaft kann folgende Werte haben:
- Ein
timestamp
, der die Zeit in Millisekunden darstellt, zu der das Element auf dem Bildschirm gerendert wurde. 0
, wenn die Ressource eine Cross-Origin-Anfrage ist und keinTiming-Allow-Origin
HTTP-Antwort-Header verwendet wird.
Beispiele
Protokollierung der renderTime des größten inhaltsvollen Elements
Dieses Beispiel verwendet einen PerformanceObserver
, der über neue largest-contentful-paint
-Leistungseinträge informiert, wenn sie in der Performance-Timeline des Browsers aufgezeichnet werden. Die Option buffered
wird verwendet, um auf Einträge vor der Erstellung des Observers zuzugreifen.
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 });
Renderzeit eines Cross-Origin-Bildes
Aus Sicherheitsgründen ist der Wert der renderTime
-Eigenschaft 0
, wenn die Ressource eine Cross-Origin-Anfrage ist. Stattdessen wird die loadTime
angezeigt. Um Informationen zur Renderzeit bei Cross-Origin freizugeben, muss der Timing-Allow-Origin
HTTP-Antwort-Header gesetzt werden.
Zum Beispiel sollte die Cross-Origin-Ressource, um https://developer.mozilla.org
die Einsicht in renderTime
zu ermöglichen, folgende Rückmeldung senden:
Timing-Allow-Origin: https://developer.mozilla.org
Alternativ können Sie startTime
verwenden, das den Wert der renderTime
zurückgibt, wenn er nicht 0
ist, und ansonsten den Wert der loadTime
. Es wird jedoch empfohlen, den Timing-Allow-Origin
-Header zu setzen, damit die Metriken genauer sind.
Wenn Sie startTime
verwenden, können Sie jegliche Ungenauigkeiten markieren, indem Sie prüfen, ob renderTime
verwendet wurde:
const isAccurateLCP = entry.renderTime ? true : false;
Spezifikationen
Specification |
---|
Largest Contentful Paint # dom-largestcontentfulpaint-rendertime |
Browser-Kompatibilität
BCD tables only load in the browser