LargestContentfulPaint

Der zentrale Moment, den diese API liefert, ist die Largest Contentful Paint (LCP) Metrik. Sie gibt die Renderzeit des größten Bildes oder Textblocks an, der im sichtbaren Bereich innerhalb des Viewports angezeigt wird. Diese wird ab dem Moment gemessen, in dem die Seite zu laden beginnt. Die folgenden Elemente werden bei der Bestimmung der LCP berücksichtigt:

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

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

Zusätzliche wichtige Momentaufnahmen beim Rendern werden durch die PerformancePaintTiming API bereitgestellt:

• First paint (FP): Zeitpunkt, zu dem irgendetwas gerendert wird. Beachten Sie, dass die Markierung des ersten Renders optional ist, nicht alle Benutzeragenten berichten darüber.
• First contentful paint (FCP): Zeitpunkt, zu dem der erste Teil des DOM-Textes oder Bildinhalts gerendert wird.

LargestContentfulPaint erbt von PerformanceEntry.

Diese Schnittstelle erweitert die folgenden PerformanceEntry Eigenschaften, indem sie die Eigenschaften wie folgt qualifiziert und begrenzt:

PerformanceEntry.entryType Nur lesbar Experimentell

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

PerformanceEntry.name Nur lesbar Experimentell

Gibt immer eine leere Zeichenfolge zurück.

PerformanceEntry.startTime Nur lesbar Experimentell

Gibt den Wert von renderTime zurück, wenn er nicht 0 ist, andernfalls den Wert von loadTime.

PerformanceEntry.duration Nur lesbar Experimentell

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

Es unterstützt auch die folgenden Eigenschaften:

LargestContentfulPaint.element Nur lesbar

Das Element, das derzeit die größte inhaltliche Darstellung hat.

LargestContentfulPaint.renderTime Nur lesbar

Die Zeit, zu der das Element auf den Bildschirm gerendert wurde. Möglicherweise nicht verfügbar, wenn das Element ein fernen Ursprung-Bild ist, das ohne den Timing-Allow-Origin-Header geladen wurde.

LargestContentfulPaint.loadTime Nur lesbar

Die Zeit, zu der das Element geladen wurde.

LargestContentfulPaint.size Nur lesbar

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

LargestContentfulPaint.id Nur lesbar

Die ID des Elements. Diese Eigenschaft gibt eine leere Zeichenfolge zurück, wenn keine ID vorhanden ist.

LargestContentfulPaint.url Nur lesbar

Falls 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 die größte inhaltliche Darstellung während des Ladevorgangs der Seite zu erhalten. Das buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Erstellung des Beobachters vorhanden waren.

Die LCP-API analysiert alle gefundene Inhalte (einschließlich Inhalte, die aus dem DOM entfernt werden). Wenn neuer, größerer Inhalt gefunden wird, erstellt sie einen neuen Eintrag. Sie stellt die Suche nach größeren Inhalten ein, wenn Scroll- oder Eingabeereignisse auftreten, da diese Ereignisse wahrscheinlich neuen Inhalt auf der Website einführen. Daher ist die LCP der letzte Leistungseintrag, der vom 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 ist der Wert der renderTime-Eigenschaft 0, wenn es sich um eine Abfrage von einem fernen Ursprung handelt. Stattdessen wird die loadTime angezeigt. Um Informationen zur Renderzeit von fernen Ursprüngen offenzulegen, muss der Timing-Allow-Origin HTTP-Response-Header gesetzt werden.

Um beispielsweise https://developer.mozilla.org die Ansicht von renderTime zu ermöglichen, sollte die ferne Ursprungsressource senden:

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

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

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

const isAccurateLCP = entry.renderTime ? true : false;

• Largest Contentful Paint
• First contentful paint
• First paint