LargestContentfulPaint: renderTime Eigenschaft

Wert

Die renderTime-Eigenschaft kann folgende Werte annehmen:

• Ein timestamp, der den Zeitpunkt in Millisekunden darstellt, zu dem das Element auf dem Bildschirm gerendert wurde.
• 0 oder ein groberer timestamp, wenn die Ressource eine Cross-Origin-Anfrage ist und kein Timing-Allow-Origin HTTP-Antwort-Header verwendet wird.

Renderzeit für Cross-Origin-Bilder

Aus Sicherheitsgründen war der Wert der renderTime-Eigenschaft ursprünglich 0, wenn die Ressource eine Cross-Origin-Anfrage ist.

Browser könnten jetzt eine leicht geraue Renderzeit in diesen Situationen offenlegen. Überprüfen Sie die Browser-Unterstützung.

Um genauere Informationen zur Cross-Origin-Renderzeit offenzulegen, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt werden.

Beispielsweise sollte die Cross-Origin-Ressource, um https://developer.mozilla.org zu erlauben, eine genaue renderTime zu sehen, Folgendes senden:

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

Verwenden Sie startTime über renderTime

Unabhängig von der Genauigkeit der renderTime sollten Entwickler startTime über renderTime als LCP-Zeit verwenden. Dies gibt den Wert der renderTime des Eintrags zurück, wenn dieser nicht 0 ist, und ansonsten den Wert der loadTime dieses Eintrags, sodass die Notwendigkeit entfällt, auf 0-Werte für nicht unterstützende Browser zu prüfen.

Beispiele

Protokollierung der renderTime des largest contentful paint

Dieses Beispiel verwendet einen PerformanceObserver, der über neue largest-contentful-paint-Performanceeinträge benachrichtigt, sobald sie in der Leistungstimeline des Browsers aufgezeichnet werden. Die buffered-Option 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 });

Spezifikationen

Browser-Kompatibilität