LargestContentfulPaint

Instanzeigenschaften

Dieses Interface definiert unmittelbar die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt

Das Element, das derzeit den größten sichtbaren Inhalt darstellt.

LargestContentfulPaint.renderTime Schreibgeschützt

Der Zeitpunkt, zu dem das Element auf dem Bildschirm gerendert wurde. Der Wert kann weniger präzise sein, wenn es sich bei dem Element um ein Cross-Origin-Bild handelt, das ohne den Header Timing-Allow-Origin geladen wurde.

LargestContentfulPaint.loadTime Schreibgeschützt

Der Zeitpunkt, zu dem das Element geladen wurde.

LargestContentfulPaint.size Schreibgeschützt

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

LargestContentfulPaint.id Schreibgeschützt

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

LargestContentfulPaint.paintTime

Gibt den Zeitstempel zurück, zu dem die Rendering-Phase endete und die Paint-Phase begann.

LargestContentfulPaint.presentationTime

Gibt den Zeitstempel zurück, zu dem die gezeichneten Pixel tatsächlich auf dem Bildschirm angezeigt wurden.

LargestContentfulPaint.url Schreibgeschützt

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

Außerdem erweitert es die folgenden Eigenschaften von PerformanceEntry und konkretisiert beziehungsweise beschränkt sie wie beschrieben:

PerformanceEntry.entryType Schreibgeschützt

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

PerformanceEntry.name Schreibgeschützt

Gibt immer eine leere Zeichenfolge zurück.

PerformanceEntry.startTime Schreibgeschützt

Gibt den Wert von renderTime für diesen Eintrag zurück.

PerformanceEntry.duration Schreibgeschützt

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

Instanzmethoden

LargestContentfulPaint.toJSON()

Gibt ein einfaches, JSON-serialisierbares Objekt zurück, das das LargestContentfulPaint-Objekt repräsentiert. Wird von JSON.stringify() automatisch aufgerufen.

Beschreibung

Die wichtigste Kennzahl, die diese API bereitstellt, ist Largest Contentful Paint (LCP). Sie gibt den Zeitpunkt an, zu dem das größte im Viewport sichtbare Bild oder der größte dort sichtbare Textblock gerendert wurde, gemessen ab dem Beginn des Seitenladens. Die folgenden Elemente gelten bei der Bestimmung des LCP als inhaltstragend:

• <img>-Elemente.
• <image>-Elemente innerhalb einer SVG.
• Die Vorschaubilder von <video>-Elementen.
• Elemente mit einem background-image.
• Gruppen von Textknoten, beispielsweise <p>.

Um die Rendering-Zeiten anderer Elemente zu messen, verwenden Sie die PerformanceElementTiming-API.

Weitere wichtige Zeitpunkte beim Rendern stellt die PerformancePaintTiming-API bereit:

• First Paint (FP): Der Zeitpunkt, zu dem erstmals etwas gerendert wird. Beachten Sie, dass die Erfassung von First Paint optional ist; nicht alle User Agents melden diesen Wert.
• First Contentful Paint (FCP): Der Zeitpunkt, zu dem erstmals DOM-Text oder Bildinhalt gerendert wird.

LargestContentfulPaint erbt von PerformanceEntry.

Um die Rendering-Zeit von Cross-Origin-Ressourcen genau zu messen, setzen Sie den Header Timing-Allow-Origin.

Weitere Informationen finden Sie unter Rendering-Zeit von Cross-Origin-Bildern und startTime anstelle von renderTime verwenden.

Beispiele

Largest Contentful Paint beobachten

Im folgenden Beispiel wird ein PerformanceObserver registriert, um Largest Contentful Paint während des Ladens der Seite zu erfassen. Das Flag buffered ermöglicht den Zugriff auf Daten, die vor der Erstellung des Observers erfasst wurden.

Die LCP-API analysiert alle gefundenen Inhalte, auch solche, die aus dem DOM entfernt werden. Wenn sie einen neuen größten Inhalt findet, erstellt sie einen neuen Eintrag. Sobald Scroll- oder Eingabeereignisse auftreten, sucht sie nicht mehr nach größeren Inhalten, da diese Ereignisse wahrscheinlich neue Inhalte auf der Website sichtbar machen. Der LCP ist daher der letzte vom Observer gemeldete Performance-Eintrag.

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

Zeitpunkte für Paint und Anzeige getrennt beobachten

Mit den Eigenschaften paintTime und presentationTime können Sie die Zeitpunkte abrufen, zu denen die Paint-Phase beginnt beziehungsweise die gezeichneten Pixel auf dem Bildschirm angezeigt werden. paintTime ist weitgehend browserübergreifend verfügbar, während presentationTime von der Implementierung abhängt.

Dieses Beispiel baut auf dem vorherigen Observer-Beispiel auf. Es zeigt, wie Sie prüfen, ob paintTime und presentationTime unterstützt werden, und die Werte abrufen, falls sie verfügbar sind. In Browsern ohne entsprechende Unterstützung ruft der Code je nach Verfügbarkeit renderTime oder loadTime ab.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  if (lastEntry.presentationTime) {
    console.log(
      "LCP paintTime:",
      lastEntry.paintTime,
      "LCP presentationTime:",
      lastEntry.presentationTime,
    );
  } else if (lastEntry.paintTime) {
    console.log("LCP paintTime:", lastEntry.paintTime);
  } else if (lastEntry.renderTime) {
    console.log("LCP renderTime:", lastEntry.renderTime);
  } else {
    console.log("LCP loadTime:", lastEntry.loadTime);
  }
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Largest Contentful Paint
• First Contentful Paint
• First Paint