LargestContentfulPaint

Beschreibung

Der wichtigste Moment, den diese API bereitstellt, ist die Largest Contentful Paint (LCP)-Metrik. Sie gibt die Renderzeit des größten Bildes oder Textblocks an, der innerhalb des Sichtfensters sichtbar ist, gemessen ab dem Zeitpunkt, an 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 Posterbilder von <video>-Elementen.
• Elemente mit einem background-image.
• Gruppen von Textknoten, wie <p>.

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

Zusätzliche wichtige Renderzeitpunkte werden durch die PerformancePaintTiming API bereitgestellt:

• First Paint (FP): Zeitpunkt, an dem irgendetwas gerendert wird. Beachten Sie, dass die Markierung des ersten Anstrichs optional ist, nicht alle User Agents berichten darüber.
• First Contentful Paint (FCP): Zeitpunkt, an dem das erste Stück DOM-Text oder -Bildinhalt gerendert wird.

LargestContentfulPaint erbt von PerformanceEntry.

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

Siehe Renderzeit für Fremdbilder und Verwenden Sie startTime über renderTime für weitere Details.

Instanzeigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt

Das Element, das den aktuell größten inhaltsreichen Anstrich darstellt.

LargestContentfulPaint.renderTime Schreibgeschützt

Die Zeit, zu der das Element auf dem Bildschirm gerendert wurde. Kann ein vereinfachter Wert sein, wenn das Element ein Fremdbild ist, 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.paintTime

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

LargestContentfulPaint.presentationTime

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

LargestContentfulPaint.url Schreibgeschützt

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

Es erweitert auch die folgenden PerformanceEntry-Eigenschaften, qualifiziert und beschränkt sie wie beschrieben:

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 der renderTime dieses Eintrags zurück.

PerformanceEntry.duration Schreibgeschützt Experimentell

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

Instanzmethoden

Dieses Interface erbt auch Methoden von PerformanceEntry.

LargestContentfulPaint.toJSON()

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

Beispiele

Beobachten des größten inhaltsreichen Anstrichs

Im folgenden Beispiel wird ein PerformanceObserver registriert, um den größten inhaltsreichen Anstrich zu erfassen, während die Seite geladen wird. Der buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Erstellung des Observers verfügbar sind.

Die LCP-API analysiert alle gefundenen Inhalte (einschließlich Inhalte, die aus dem DOM entfernt werden). Wenn neuer größerer Inhalt gefunden wird, wird ein neuer Eintrag erstellt. Sie hört auf, nach größerem Inhalt zu suchen, wenn Scroll- oder Eingabeereignisse auftreten, da diese Ereignisse wahrscheinlich neuen Inhalt auf der Website einführen. Das LCP ist somit der letzte Leistungseintrag, der vom Observer 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 separater Anstrich- und Präsentationszeiten

Die paintTime- und presentationTime-Eigenschaften ermöglichen es Ihnen, spezifische Zeitangaben für den Beginn der Anstrichphase und das tatsächliche Zeichnen der gerenderten Pixel auf dem Bildschirm abzurufen. Die paintTime ist weitgehend interoperabel, während die presentationTime implementierungsabhängig ist.

Dieses Beispiel baut auf dem früheren Observer-Beispiel auf und zeigt, wie man die Unterstützung für paintTime und presentationTime überprüft und diese Werte abrufen kann, 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