LargestContentfulPaint

Der Hauptmoment, den diese API bietet, 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 Beginn des Seitenladens aufgezeichnet. Die folgenden Elemente werden bei der Bestimmung der LCP berücksichtigt:

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

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

Weitere wichtige Render-Momente werden von der PerformancePaintTiming-API bereitgestellt:

• First Paint (FP): Zeitpunkt, zu dem etwas gerendert wird. Beachten Sie, dass das Markieren des ersten Renderns optional ist und nicht alle Benutzeragenten es melden.
• First Contentful Paint (FCP): Zeitpunkt, zu dem das erste DOM-Text- oder Bildinhalt gerendert wird.

LargestContentfulPaint erbt von PerformanceEntry.

Dieses Interface erweitert die folgenden Eigenschaften von PerformanceEntry und schränkt die Eigenschaften wie folgt ein:

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 dieser 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.

Es unterstützt auch die folgenden Eigenschaften:

LargestContentfulPaint.element Schreibgeschützt

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

LargestContentfulPaint.renderTime Schreibgeschützt

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 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.

Dieses Interface erbt auch Methoden von PerformanceEntry.

LargestContentfulPaint.toJSON()

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

Im folgenden Beispiel wird ein Observer registriert, um während des Ladevorgangs der Seite das größte inhaltsreiche Element zu erhalten. Das buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Observer-Erstellung entstanden sind.

Die LCP-API analysiert alle Inhalte, die sie findet (einschließlich Inhalte, die aus dem DOM entfernt werden). Wenn neuer, größerer Inhalt gefunden wird, erstellt sie einen neuen Eintrag. 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. Somit ist der 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 });

Aus Sicherheitsgründen war der Wert der renderTime-Eigenschaft ursprünglich 0, wenn die Ressource eine Cross-Origin-Anfrage war. Stattdessen sollte die loadTime-Eigenschaft als Fallback verwendet werden.

Browser können jetzt eine leicht angepasste Renderzeit bereitstellen in diesen Situationen. Prüfen Sie die Browser-Unterstützung.

Um genauere Cross-Origin-Renderzeitinformationen bereitzustellen, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.

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

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

Wie im Code-Beispiel können Sie startTime verwenden, das den Wert des Eintrags renderTime zurückgibt, wenn er nicht 0 ist, und andernfalls den Wert dieses Eintrags loadTime. Es wird jedoch empfohlen, den Timing-Allow-Origin-Header zu setzen, damit die Metriken genauer werden.

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

const isAccurateLCP = entry.renderTime ? true : false;

• Largest Contentful Paint
• First Contentful Paint
• First Paint