LargestContentfulPaint

Instanzeigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt

Das Element, das aktuell das größte inhaltsreiche Element ist.

LargestContentfulPaint.renderTime Schreibgeschützt

Die Zeit, zu der das Element auf dem Bildschirm gerendert wurde. Dies kann ein grober Wert sein, wenn das Element ein Cross-Origin-Bild ist, das ohne das 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, angegeben 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.paintTime

Gibt den timestamp zurück, wann die Renderphase endete und die Malphase begann.

LargestContentfulPaint.presentationTime

Gibt den timestamp zurück, wann die gemalten Pixel tatsächlich auf dem Bildschirm dargestellt wurden.

LargestContentfulPaint.url Schreibgeschützt

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

Es erweitert außerdem die folgenden Eigenschaften von PerformanceEntry, wobei sie qualifiziert und eingeschränkt werden wie beschrieben:

PerformanceEntry.entryType Schreibgeschützt

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

PerformanceEntry.name Schreibgeschützt

Gibt immer einen leeren String zurück.

PerformanceEntry.startTime Schreibgeschützt

Gibt den Wert von renderTime dieses Eintrags zurück.

PerformanceEntry.duration Schreibgeschützt

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

Instanzmethoden

Dieses Interface erbt auch Methoden von PerformanceEntry.

LargestContentfulPaint.toJSON()

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

Beschreibung

Der zentrale Moment, den diese API bereitstellt, ist die Metrik für das Largest Contentful Paint (LCP). Sie gibt die Renderzeit des größten Bildes oder Textblocks an, der im sichtbaren Bereich des Ansichtsfensters gerendert wird, gemessen ab dem Zeitpunkt, an dem die Seite zu laden beginnt. Die folgenden Elemente werden als inhaltlich betrachtet, wenn das LCP bestimmt wird:

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

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

Weitere wichtige Malmomente werden durch die PerformancePaintTiming API bereitgestellt:

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

LargestContentfulPaint erbt von PerformanceEntry.

Um eine genaue Messung der Renderzeit für Cross-Origin-Ressourcen zu erhalten, setzen Sie den Timing-Allow-Origin-Header.

Siehe Cross-origin image render time und Use startTime over renderTime für weitere Details.

Beispiele

Beobachten des größten inhaltsreichen Elements

Im folgenden Beispiel wird ein PerformanceObserver registriert, um das größte inhaltsreiche Element während des Ladens der Seite zu erfassen. Das buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Erstellung des Observers erfasst wurden.

Die LCP-API analysiert alle gefundenen Inhalte (einschließlich Inhalte, die aus dem DOM entfernt wurden). Wenn neue größte Inhalte gefunden werden, wird ein neuer Eintrag erstellt. Sie hört auf, nach größeren Inhalten zu suchen, wenn Scroll- oder Eingabeereignisse auftreten, da diese Ereignisse wahrscheinlich neue Inhalte auf der Webseite einführen. Daher ist das 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 });

Beobachten von separaten Mal- und Darstellungsmomenten

Mit den Eigenschaften paintTime und presentationTime können Sie spezifische Zeitpunkte für den Beginn der Malphase und das tatsächliche Zeichnen der gemalten Pixel auf dem Bildschirm abrufen. Die paintTime ist weitgehend interoperabel, während die presentationTime implementierungsabhängig ist.

Dieses Beispiel baut auf dem früheren Beobachterbeispiel auf und zeigt, wie man die Unterstützung für paintTime und presentationTime überprüft und diese Werte abruft, wenn sie verfügbar sind. In nicht unterstützenden Browsern ruft der Code die renderTime oder loadTime ab, je nachdem, was unterstützt wird.

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