LargestContentfulPaint

Instanzeigenschaften

Diese Schnittstelle definiert die folgenden Eigenschaften direkt:

LargestContentfulPaint.element Schreibgeschützt

Das Element, das aktuell den größten gerenderten Inhalt darstellt.

LargestContentfulPaint.renderTime Schreibgeschützt

Der Zeitpunkt, zu dem das Element auf dem Bildschirm gerendert wurde. Der Wert kann eine geringere Genauigkeit aufweisen, 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, zurückgegeben 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 Schreibgeschützt

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

LargestContentfulPaint.presentationTime Schreibgeschützt

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

LargestContentfulPaint.url Schreibgeschützt

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

Sie erweitert außerdem die folgenden Eigenschaften von PerformanceEntry, wobei für diese die beschriebenen Präzisierungen und Einschränkungen gelten:

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 diese Schnittstelle nicht anwendbar ist.

Instanzmethoden

LargestContentfulPaint.toJSON()

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

Beschreibung

Der zentrale Messwert dieser API ist Largest Contentful Paint (LCP). Er 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 Seitenladevorgangs. Bei der Ermittlung des LCP gelten die folgenden Elemente als inhaltstragend:

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

Verwenden Sie die PerformanceElementTiming-API, um die Renderzeiten anderer Elemente zu messen.

Weitere wichtige Zeitpunkte beim Rendern werden von der PerformancePaintTiming-API bereitgestellt:

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

LargestContentfulPaint erbt von PerformanceEntry.

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

Weitere Einzelheiten finden Sie unter Renderzeit von Cross-Origin-Bildern und startTime statt renderTime verwenden.

Beispiele

Largest Contentful Paint beobachten

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

Die LCP-API analysiert sämtliche gefundenen Inhalte, auch solche, die aus dem DOM entfernt werden. Wenn ein neuer, größerer Inhalt gefunden wird, 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 der Paint-Phase und der Darstellung getrennt beobachten

Mit den Eigenschaften paintTime und presentationTime können Sie jeweils den Zeitpunkt des Beginns der Paint-Phase und den Zeitpunkt abrufen, zu dem die gerenderten Pixel auf dem Bildschirm dargestellt wurden. paintTime ist weitgehend interoperabel, während presentationTime von der Implementierung abhängt.

Dieses Beispiel baut auf dem vorherigen Observer-Beispiel auf. Es zeigt, wie Sie die Unterstützung für paintTime und presentationTime prüfen und die Werte abrufen, falls sie verfügbar sind. In Browsern, die diese Eigenschaften nicht unterstützen, ruft der Code je nach Unterstützung 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