LargestContentfulPaint

Der wichtigste Moment, den diese API bereitstellt, ist die Largest Contentful Paint (LCP)-Metrik. Sie liefert die Renderzeit des größten Bildes oder Textblocks, der innerhalb des Viewports sichtbar ist und erfasst wird, ab dem Moment, wenn die Seite zu laden beginnt. Die folgenden Elemente werden bei der Bestimmung des 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 die Renderzeiten anderer Elemente zu messen, verwenden Sie die PerformanceElementTiming API.

Zusätzliche wichtige Darstellungszeitpunkte werden von der PerformancePaintTiming API bereitgestellt:

• First Paint (FP): Zeit, wann irgendetwas gerendert wird. Beachten Sie, dass die Markierung des ersten Paints optional ist, nicht alle User Agents melden es.
• First Contentful Paint (FCP): Zeit, wann das erste Stück DOM-Text oder Bildinhalt gerendert wird.

LargestContentfulPaint erbt von PerformanceEntry.

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

PerformanceEntry.entryType Nur lesbar Experimentell

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

PerformanceEntry.name Nur lesbar Experimentell

Gibt immer einen leeren String zurück.

PerformanceEntry.startTime Nur lesbar Experimentell

Gibt den Wert der renderTime dieses Eintrags zurück, falls dieser nicht 0 ist, ansonsten den Wert der loadTime dieses Eintrags.

PerformanceEntry.duration Nur lesbar Experimentell

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

Es unterstützt auch die folgenden Eigenschaften:

LargestContentfulPaint.element Nur lesbar

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

LargestContentfulPaint.renderTime Nur lesbar

Die Zeit, zu der das Element auf dem Bildschirm gerendert wurde. Möglicherweise nicht verfügbar, wenn das Element ein Cross-Origin-Bild ist, das ohne das Timing-Allow-Origin-Header geladen wurde.

LargestContentfulPaint.loadTime Nur lesbar

Die Zeit, zu der das Element geladen wurde.

LargestContentfulPaint.size Nur lesbar

Die intrinsische Größe des Elements wird als Fläche (Breite * Höhe) zurückgegeben.

LargestContentfulPaint.id Nur lesbar

Die ID des Elements. Diese Eigenschaft gibt einen leeren String zurück, wenn keine ID vorhanden ist.

LargestContentfulPaint.url Nur lesbar

Falls das Element ein Bild ist, die URL des Bildanforderung.

Dieses Interface erbt auch von PerformanceEntry Methoden.

LargestContentfulPaint.toJSON()

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

Im folgenden Beispiel wird ein Observer registriert, um die größte contentful paint während des Ladens der Seite zu erhalten. Das buffered-Flag wird verwendet, um auf Daten vor der Erstellung des Observers 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, wird ein neuer Eintrag erstellt. Die Suche nach größeren Inhalten wird beendet, wenn Scroll- oder Eingabeereignisse auftreten, da diese Ereignisse wahrscheinlich neue Inhalte auf der Webseite einführen. Daher ist die LCP der letzte vom Observer gemeldete Leistungs-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 });

Aus Sicherheitsgründen ist der Wert der renderTime-Eigenschaft 0, wenn die Ressource eine Cross-Origin-Anforderung ist. Stattdessen wird die loadTime offengelegt. Um Informationen zur Cross-Origin-Renderzeit offenzulegen, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org zu erlauben, die renderTime zu sehen, sollte die Cross-Origin-Ressource senden:

Timing-Allow-Origin: https://developer.mozilla.org

Wie im Codebeispiel gezeigt, können Sie startTime verwenden, die den Wert der renderTime des Eintrags zurückgibt, wenn dieser nicht 0 ist und ansonsten den Wert der loadTime dieses Eintrags. Es wird jedoch empfohlen, den Timing-Allow-Origin Header zu setzen, damit die Metriken genauer sind.

Wenn Sie startTime verwenden, können Sie etwaige Ungenauigkeiten kennzeichnen, indem Sie überprüfen, ob renderTime verwendet wurde:

const isAccurateLCP = entry.renderTime ? true : false;

• Largest Contentful Paint
• First Contentful Paint
• First Paint