LargestContentfulPaint

Der Schlüssel-Moment, den diese API bietet, ist die Largest Contentful Paint (LCP)-Metrik. Sie gibt die Renderzeit des größten Bildes oder Textblocks an, das innerhalb des Ansichtsfensters sichtbar ist und vom Zeitpunkt des Erstladens der Seite aufgezeichnet wird. Die folgenden Elemente werden bei der Bestimmung der LCP berücksichtigt:

• <img>-Elemente.
• <image>-Elemente innerhalb eines SVG.
• Die Vorschaubilder von <video>-Elementen.
• Elemente mit einem background-image.
• Gruppen von Textknoten, wie z.B. <p>.

Um Renderzeiten anderer Elemente zu messen, verwenden Sie die PerformanceElementTiming API.

Zusätzliche Schlüssel-Momente werden durch die PerformancePaintTiming API bereitgestellt:

• First Paint (FP): Zeitpunkt, an dem irgendetwas gerendert wird. Beachten Sie, dass das Markieren des ersten Renderings optional ist und nicht alle Benutzeragenten es melden.
• First Contentful Paint (FCP): Zeitpunkt, an dem das erste Stück DOM-Text oder Bildinhalt gerendert wird.

LargestContentfulPaint erbt von PerformanceEntry.

Diese Schnittstelle erweitert die folgenden PerformanceEntry Eigenschaften, indem sie die Eigenschaften wie folgt qualifiziert und einschränkt:

PerformanceEntry.entryType Schreibgeschützt Experimentell

Gibt "largest-contentful-paint" zurück.

PerformanceEntry.name Schreibgeschützt Experimentell

Gibt immer einen leeren String zurück.

PerformanceEntry.startTime Schreibgeschützt Experimentell

Gibt den Wert von renderTime dieser Eintragung zurück, falls dieser nicht 0 ist, andernfalls den Wert von loadTime.

PerformanceEntry.duration Schreibgeschützt Experimentell

Gibt 0 zurück, da duration für diese Schnittstelle nicht anwendbar ist.

Es unterstützt auch die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt

Das Element, das derzeit das größte "Contentful Paint" darstellt.

LargestContentfulPaint.renderTime Schreibgeschützt

Die Zeit, wann das Element auf dem Bildschirm gerendert wurde. Möglicherweise nicht verfügbar, wenn es sich um ein Cross-Origin-Bild handelt, das ohne das Timing-Allow-Origin-Header geladen wurde.

LargestContentfulPaint.loadTime Schreibgeschützt

Die Zeit, wann das Element geladen wurde.

LargestContentfulPaint.size Schreibgeschützt

Die intrinsische Größe des Elements, zurückgegeben als Fläche (Breite * Höhe).

LargestContentfulPaint.id Schreibgeschützt

Die ID des Elements. Diese Eigenschaft gibt einen leeren String zurück, wenn keine ID vorhanden ist.

LargestContentfulPaint.url Schreibgeschützt

Wenn das Element ein Bild ist, die Anfrage-URL des Bildes.

Diese Schnittstelle erbt auch Methoden von PerformanceEntry.

LargestContentfulPaint.toJSON()

Gibt eine JSON-Darstellung des LargestContentfulPaint-Objekts zurück.

Im folgenden Beispiel wird ein Beobachter registriert, um das größte "Contentful Paint" während des Ladens der Seite zu erhalten. Das buffered-Flag wird verwendet, um auf Daten vor der Erstellung des Beobachters zugreifen zu können.

Die LCP-API analysiert alle Inhalte, die sie findet (einschließlich Inhalten, die aus dem DOM entfernt werden). Wenn neuer, größerer Inhalt gefunden wird, erstellt sie einen neuen Eintrag. Die Suche nach größerem Inhalt endet, wenn Scroll- oder Eingabeereignisse auftreten, da diese Ereignisse wahrscheinlich neuen Inhalt auf der Webseite einführen. Das LCP ist somit der letzte Performance-Eintrag, der durch den Beobachter gemeldet wird.

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 });

Aus Sicherheitsgründen war der Wert der renderTime-Eigenschaft ursprünglich 0, wenn die Ressource eine Cross-Origin-Anfrage ist. Stattdessen sollte die loadTime-Eigenschaft als Fallback verwendet werden.

Browser könnten jetzt eine leicht vergröberte Renderzeit in diesen Situationen offenlegen. Prüfen Sie die Unterstützung durch den Browser.

Um genauere Informationen zur Cross-Origin-Renderzeit zu veröffentlichen, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org eine genaue renderTime-Angabe zu ermöglichen, sollte die Cross-Origin-Ressource senden:

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

Wie im Code-Beispiel gezeigt, können Sie startTime verwenden, die den Wert des Eintrags von renderTime zurückgibt, wenn er nicht 0 ist, und andernfalls den Wert dieses Eintrags von loadTime. Es wird jedoch empfohlen, den Timing-Allow-Origin-Header zu setzen, damit die Metriken genauer werden.

Wenn Sie startTime verwenden, können Sie Ungenauigkeiten kennzeichnen, indem Sie überprüfen, ob renderTime verwendet wurde:

const isAccurateLCP = Boolean(entry.renderTime);

• Largest Contentful Paint
• First Contentful Paint
• First Paint