LargestContentfulPaint

Der entscheidende Moment, den diese API bereitstellt, ist die Largest Contentful Paint (LCP) Metrik. Sie gibt die Renderzeit des größten sichtbaren Bildes oder Textblocks im Viewport an, gemessen ab dem Zeitpunkt, zu dem die Seite zu laden beginnt. Die folgenden Elemente werden bei der Bestimmung des LCP berücksichtigt:

• <img>-Elemente.
• <image>-Elemente innerhalb eines SVG.
• Die Poster-Bilder 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.

Weitere wichtige Render-Momente werden durch die PerformancePaintTiming API bereitgestellt:

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

LargestContentfulPaint erbt von PerformanceEntry.

Dieses Interface erweitert die folgenden Eigenschaften von PerformanceEntry durch Qualifizierung und Einschränkung der Eigenschaften wie folgt:

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 Instanz zurück, wenn dieser nicht 0 ist, andernfalls den Wert von loadTime dieser Instanz.

PerformanceEntry.duration Schreibgeschützt Experimentell

Gibt 0 zurück, da duration für dieses Interface nicht anwendbar ist.

Unterstützt außerdem die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt

Das Element, das den aktuellen größten inhaltsvollen Paint darstellt.

LargestContentfulPaint.renderTime Schreibgeschützt

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

LargestContentfulPaint.loadTime Schreibgeschützt

Die Zeit, zu der 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 Anforderungs-URL des Bildes.

Dieses Interface erbt auch Methoden von PerformanceEntry.

LargestContentfulPaint.toJSON()

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

Im folgenden Beispiel wird ein Beobachter registriert, um den größten inhaltsvollen Paint zu erfassen, während die Seite lädt. Das buffered-Flag wird genutzt, um auf Daten vor der Erstellung des Beobachters zuzugreifen.

Die LCP-API analysiert alle gefundenen Inhalte (einschließlich Inhalte, die aus dem DOM entfernt werden). Wenn neuer größter Inhalt gefunden wird, erstellt sie einen neuen Eintrag. Die Suche nach größerem Inhalt wird gestoppt, wenn Scroll- oder Eingabeereignisse auftreten, da diese Ereignisse wahrscheinlich neuen Inhalt auf der Website einführen. Daher ist das LCP der letzte Leistungs-Eintrag, 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 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önnen jetzt eine leicht grobe Renderzeit bereitstellen in diesen Situationen. Überprüfen Sie die Browser-Unterstützung.

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

Zum Beispiel, um https://developer.mozilla.org eine genaue renderTime sehen zu lassen, sollte die Cross-Origin-Ressource senden:

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

Wie im Codebeispiel können Sie startTime verwenden, das den Wert von renderTime der Instanz zurückgibt, wenn dieser 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 überprüfen, ob renderTime verwendet wurde:

const isAccurateLCP = entry.renderTime ? true : false;

• Largest Contentful Paint
• First Contentful Paint
• First Paint