Google Page Experience Update und Core Web-Vitals (Teil 2)

Erstellt am von

Largest Contentful Paint

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?

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.

 

Element nur teilweise im VieportBild wird vergrößertBild wird verkleinert

 

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

Textbeispiel

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

Box-Model Largest Contentful Paint

 

 

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.

Ladeprozess im Wasserfalldiagramm

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.

First Contentful PaintLCP Beispiel

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:
 

Ladeprozess

 

 

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

Gerne unterstützen wir auch Sie bei der Optimierung der Web-Vitals-Messwerte Ihrer Website!

Kontaktieren Sie uns!

Bahadir Heeb

Bahadir Heeb ist Projektleiter in unserer Web-Abteilung. Seit 2009 ist Bahadir Heeb bei SCHÖTEX und unser Experte, wenn es um Web-Entwicklung, Online-Marketing und User-Experience geht. Als Ausbilder ist er zudem für die Ausbildung unserer Auszubildenden verantwortlich.


Kommentare

Einen Kommentar schreiben

Was ist die Summe aus 2 und 9?

Kontaktieren Sie uns

Sie haben Interesse an einer Zusammenarbeit mit uns? Dann nehmen Sie jetzt ganz unverbindlich mit uns Kontakt auf.

SCHÖTEX IT-Solutions GmbH
Heinz-Paulisch-Straße 5
97816 Lohr am Main

Mit dem Absenden des Kontaktformulars erklären Sie sich damit einverstanden, dass wir die angegebenen Daten gemäß unserer Datenschutzerklärung zur Bearbeitung Ihrer Anfrage verarbeiten können.

Bitte addieren Sie 5 und 5.