LargestContentfulPaint

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das LargestContentfulPaint-Interface bietet Timing-Informationen über das größte Bild oder den größten Textblock, der vor Nutzereingaben auf einer Webseite gerendert wird.

Beschreibung

Der Schlüsselmoment, den diese API liefert, ist die Largest Contentful Paint (LCP) Metrik. Sie gibt die Renderzeit des größten Bildes oder Textblocks an, der innerhalb des Viewports sichtbar ist, und wird ab dem Zeitpunkt aufgezeichnet, wenn die Seite zu laden beginnt. Die folgenden Elemente werden bei der Bestimmung der LCP berücksichtigt:

<img> Elemente.
<image> Elemente innerhalb eines SVG.
Die Poster-Bilder von <video>-Elementen.
Elemente mit einem background-image.
Gruppen von Textknoten, wie z.B. <p>.

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

Zusätzliche wichtige Render-Momente werden durch die PerformancePaintTiming-API bereitgestellt:

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

LargestContentfulPaint erbt von PerformanceEntry.

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

Entwickler sollten startTime anstelle von renderTime als LCP-Wert verwenden, da renderTime in einigen Browsern möglicherweise nicht gesetzt ist.

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

Instanz-Eigenschaften

Dieses Interface erweitert die folgenden PerformanceEntry-Eigenschaften, indem es die Eigenschaften wie folgt qualifiziert und einschränkt:

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 von renderTime dieses Eintrags zurück, wenn er nicht 0 ist, ansonsten den Wert von loadTime dieses Eintrags.
PerformanceEntry.duration Schreibgeschützt Experimentell: Gibt 0 zurück, da duration für dieses Interface nicht zutreffend ist.

Unterstützt außerdem die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt: Das Element, das das derzeit größte Inhaltselement ist.
LargestContentfulPaint.renderTime Schreibgeschützt: Die Zeit, zu der das Element auf dem Bildschirm gerendert wurde. Kann ein grob abgeschätzter Wert oder 0 sein, wenn das Element ein fremdes 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.url Schreibgeschützt: Wenn das Element ein Bild ist, die Anforderungs-URL des Bildes.

Instanz-Methoden

Dieses Interface erbt auch Methoden von PerformanceEntry.

LargestContentfulPaint.toJSON(): Gibt eine JSON-Darstellung des LargestContentfulPaint-Objekts zurück.

Beispiele

Beobachten des größten Inhaltselements

Im folgenden Beispiel wird ein Beobachter registriert, um das größte Inhaltselement zu erfassen, während die Seite geladen wird. Das buffered-Flag wird verwendet, um auf Daten von vor der Erstellung des Beobachters zuzugreifen.

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

Spezifikationen

Specification
Largest Contentful Paint # sec-largest-contentful-paint-interface

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden