Largest Contentful Paint (LCP) - Core Web-Vitals (Teil 2)

Früher war es für Web-Entwickler gar nicht so einfach, zu bestimmen wann der Hauptinhalt der Seite geladen und sichtbar ist.

Zu Beginn wurde die Renderzeit bis zum Browser-Event "load" oder "DOMContentLoaded" gewertet. Diese Metrik entspricht nicht dem was der Besucher sieht und ist daher nicht so aussagekräftig. Benutzerzentrierte Metriken wie der First Contentful Paint messen die Zeit bis das erste Element geladen ist. Wird ein Ladebildschirm oder Ladeanimation zuerst dargestellt, zeigt diese für den Benutzer noch keinen relevanten Inhalt.

Im weiteren wurde von Google eine Optimierung mit den Metriken First Meaningful Paint und dem Speed-Index empfohlen. Von den beiden Metriken versprach Google sich eine bessere Nutzersicht. Problematisch war allerdings das diese Kennzahlen sehr komplex und schwer zu interpretieren sind.

Auf Basis von Diskussionen der W3C Web Performance Working Group und Forschungen von Google wurde festgestellt, dass die Messung des Zeitpunkts an dem das größte Element angezeigt wird, viel genauer die Sicht des Benutzers wiederspiegelt.

Somit wurde die neue Kennzahl Largest Contentful Paint definiert.

Was ist der Largest Contentful Paint?

Die Metrik Largest Contentful Paint gibt die Renderzeit des größten Textblock oder Bild innerhalb des Viewports an.

Welche Elemente werden ausgewertet?

• Bilder (<img> und <image> innerhalb eines <svg> Element)
• <video> (Hier wird das Bild aus dem im "poster"-Attribut gewertet)
• Ein Element mit einem Hintergrundbild
• Block-Elemente die Text oder andere Inline-Text Elemente beinhalten

Wie wird die Größe ermittelt?

Die Größe des Elements das für den Largest Contentful Paint zur Bewertung ermittelt wird, entspricht normalerweise der Größe die im Viewport sichtbar ist. Wenn das LCP-Element nur teilweise im Viewport sichtbar ist, wird nur der sichtbare Teil gewertet.

Wenn Bildern skaliert angezeigt werden, wird entweder die Bildgröße oder die sichtbare Größe für die Bewertung verwendet. Es wird der kleinere Wert berücksichtigt.

Bei Textelementen wird nur die Größe der beinhalteten Textknoten berücksichtigt.

Bei allen Elementen werden die Werte für margin, border und paddig nicht berücksichtigt.

Was ist ein guter Wert?

Um eine gutes Benutzererlebnis zu erzeugen sollte der Largest Contentful Paint innerhalb von 2,5 Sekunden stattfinden.

Wann wird der LCP Report erstellt?

Das Laden der Websites findet normalerweise Stufenweise bzw. Wasserfallartig statt. Daher kann es während dem Ladeprozess dazu kommen, das sich das LCP-Element ändert.

Um zu erkennen ob sich das LCP-Element geändert hat, sendet der Browser ein PerformanEntry-Event für das LCP-Element. Somit wird bei jeder Änderung ein weiterer PerformanceEntry-Eintrag erzeugt.

Ein Beispiel mit folgenden Inhalten im Viewport:

• Navbar
• Hero-Image
• <h1>-Überschrift
• Call2Action-Button

Zuerst wird die Navbar, die H1 und der Call2Action-Button gerendert und dem Benutzer angezeigt. In diesem Zustand ist das Element welches für die Bewertung des Largest Contentful Paint verwendet wird die H1-Überschrift, da diese das größte Element darstellt. Erst mit dem kompletten Laden des Hero-Images wird der LCP auf den Div-Container mit dem Bild als Hintergrund geändert.

Sobald der Benutzer mit der Seite interagiert, wird keine weitere Messung des LCP durchgeführt. Tab, Scroll, Keypress.

Der komplette Ladeprozess sieht wie folgt aus:

Wie wird der LCP gemessen?

Zur Messung stehen einige Tools zur Verfügung. Im Detail gehen wir hier nochmal mit einem separaten Beitrag darauf ein, über welche Wege man die Core Web Vitals genau messen kann.

• Field tools
  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
• Lab tools
  • Chrome DevTools
  • Lighthouse
  • WebPageTest
  • Measure LCP in JavaScript

Wie optimiert man den Largest Contentful Paint?

Die benötigte Zeit für den Largest Contentful Paint hängt hauptsächlich von den folgenden vier Faktoren ab:

1. Slow server response times
2. Render-Blocking JavaScript and CSS
3. Resource load times
4. Client-side rendering

Beitragsserie "Core Web Vitals"

• Teil 1: Google Page Experience Update und Core Web-Vitals
• Teil 2: Largest Contentful Paint (LCP) (dieser Beitrag)
• Teil 3: First Input Delay (FID)
• Teil 4: Cumulative Layout Shift (CLS)
• Teil 5: Messen der Core Web Vitals