LargestContentfulPaint

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt

Das Element, das derzeit das größte contentful paint ist.

LargestContentfulPaint.renderTime Schreibgeschützt

Die Zeit, zu der das Element auf dem Bildschirm gerendert wurde. Dies kann ein abgeschwächter Wert sein, wenn das Element ein cross-origin Bild 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, zu dem die Rendering-Phase endete und die Paint-Phase begann.

LargestContentfulPaint.presentationTime

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

LargestContentfulPaint.url Schreibgeschützt

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

Es erweitert auch die folgenden PerformanceEntry Eigenschaften und qualifiziert und beschränkt diese 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 der renderTime dieses Eintrags zurück.

PerformanceEntry.duration Schreibgeschützt

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

Instanz-Methoden

LargestContentfulPaint.toJSON()

Überschreibt die PerformanceEntry.toJSON() Methode, um eine JSON-Darstellung des LargestContentfulPaint-Objekts zurückzugeben.

Beschreibung

Der Schlüsselmoment, den diese API liefert, ist die Metrik des Largest Contentful Paint (LCP). Sie liefert die Renderzeit des größten innerhalb des Viewports sichtbaren Bildes oder Textblocks, gemessen ab Beginn des Seitenladens. Die folgenden Elemente werden als contentful betrachtet, wenn LCP ermittelt wird:

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

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

Zusätzliche wichtige Paint-Momente werden von der PerformancePaintTiming API bereitgestellt:

• First Paint (FP): Zeitpunkt, zu dem etwas gerendert wird. Beachten Sie, dass die Markierung des ersten Paint optional ist, nicht alle Benutzeragenten berichten darüber.
• First Contentful Paint (FCP): Zeitpunkt, zu dem das erste Stück DOM-Text oder Bild-Inhalt 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 contentful paint

Im folgenden Beispiel wird ein PerformanceObserver registriert, um das größte contentful paint während des Ladens der Seite zu erhalten. Das buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Erstellung des Observers vorhanden sind.

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

Beobachten separater Paint- und Präsentationszeiten

Die Eigenschaften paintTime und presentationTime ermöglichen es Ihnen, spezifische Zeiten für den Beginn der Paint-Phase und das Zeichnen der gemalten Pixel auf dem Bildschirm abzurufen. Die paintTime ist breit interoperabel, während die presentationTime implementierungsabhängig ist.

Dieses Beispiel baut auf dem vorherigen Observer-Beispiel auf und zeigt, wie Sie die Unterstützung für paintTime und presentationTime überprüfen und diese Werte abrufen, 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