core web vitals, largest contentful paint bzw. lcp messen und optimieren

Largest Contentful Paint (LCP) verbessern und optimieren! – CWV-Serie 3/5:

In unserer Artikelserie zu den Core Web Vitals kommen wir nun im dritten Teil zur ersten der drei neuen Metriken. In diesem Artikel schauen wir uns an, was der sogenannte Largest Contentful Paint (kurz LCP) eigentlich ist, was ihn beeinflusst und wie man bei Problemen den LCP gezielt verbessern und so seine Web Vitals optimieren kann – egal ob WordPress oder anderes CMS. Falls Du nun also festgestellt hast, dass deine Webseite Probleme mit dem LCP hat, entweder weil in der Search Console ein Hinweis auf „zu optimierende URLs“ oder sogar „schlechte URLs“ aufgetaucht ist, wird es höchste Zeit zu handeln!

Inhaltsverzeichnis:

  1. Was ist der LCP und was bedeutet Largest Contentful Paint?
  2. Was sind gute und schlechte LCP-Werte?
  3. Wie finde ich dir Ursache eines schlechten LCP-Werts?
  4. LCP verbessern: Zur Lösung des LCP-Problems
  5. Überprüfe deine Maßnahmen auf Erfolg

 

1. Was ist der Largest Contentful Paint (kurz LCP) eigentlich?

Der Largest Contentful Paint (LCP) ist eine der Metriken, die im Performance-Bereich des Lighthouse-Berichts verwendet werden und Teil der sogenannten Core Web Vitals. Jede dieser Metriken erfasst einen bestimmten Aspekt der Seitenladegeschwindigkeit. Google schreibt selbst dazu:

Largest Contentful Paint gibt an, wie lange das Zeichnen des längsten Texts oder des größten Bilds dauert.

Der LCP misst also, wann das größte Inhaltselement im Viewport auf dem Bildschirm gerendert wird. Dies entspricht in etwa dem Zeitpunkt, an dem der Hauptinhalt der Seite für die Benutzer sichtbar ist. Weitere Informationen dazu findet man auf der LCP-Seite bei web.dev.

2. Was ist ein guter LCP-Wert?

Um ein gutes Nutzererlebnis zu bieten, sollten Websites laut Google einen Largest Contentful Paint von 2,5 Sekunden oder weniger anstreben. Um sicherzustellen, dass dieses Ziel für die meisten Nutzer erreicht wird, verwendet Google das 75. Perzentil der Seitenaufrufe als Schwellenwert, segmentiert nach mobilen und Desktop-Geräten.

largest contentful paint lcp messen und verstehenDas bedeutet, dass 75% deiner Nutzer einen LCP von 2,5s oder besser haben müssen!

3. Wie finde ich heraus, welches Element den schlechten LCP verursacht?

Zuerst ist es wichtig, den Wert aus der Search Console nachvollziehen bzw. reproduzieren zu können. Da Google hierfür die gemeldeten Werte echter Besucher der Webseite verwendet, ist es manchmal garnicht so einfach das Problem zu identifizieren. Für einen schlechten LCP starten man am besten mit einem Lighthouse-Test im eigenen Browser. Dieses Tool ist übrigens bereits in den Entwicklertools des Google Chrome Browsers integriert (DevTools) und ermöglicht es aus dem Test direkt in die tiefere Analyse zu gelangen.

LCP mit Lighthouse analysieren

So wird die Analyse im Google Chrome Browser gestartet:

  1. Die entsprechende URL in einem Inkognito-Fenster öffnen.
  2. Die Entwicklertools (DevTools) öffnen (per F12 oder STRG + SHIFT + I unter Windows bzw. CMD + Option + I unter macOS – alternativ auch per Rechtsklick auf der Seite und im Menü „Untersuchen“ wählen.
  3. Wechsel in den Reiter „Lighthouse“ in den nun sichtbaren Developer Tools.
  4. Auswahl, ob Desktop oder Mobil getestet werden soll. (Bei den Kategorien reicht es aus „Performance“ auszuwählen.)
  5. Klick auf „Generate Report”.

Die Seite wird nun neu geladen und verschiedenen Tests unterzogen. Der Test dauert je nach Webseite in etwa zwischen 15 und 90 Sekunden. Anschließend lassen sich die erhobenen Werte einsehen und mit den gemeldeten Werten aus der Search Console vergleichen. Wenn die Werte übereinstimmen, kann man sich an die Optimierung machen.

Wichtig bei der Optimierung ist es, stets an Desktop- und Mobile-Ansicht zu denken. Durch die veränderte Darstellung kommen, insbesondere bei responsiven Templates häufig abweichende Werte zustande.

Sollte der LCP-Wert über der magischen Grenze von 2,5 Sekunden liegen, kann man über den Button „View Original Trace“ den Ladevorgang des Lighthouse-Test in das Performance-Tab der DevTools laden und dort weiter untersuchen:

core web vitals und lcp in den entwicklertools von chrome

Performance-Tab der Chrome Developer Tools

Darin findet man nun eine Zeile, die mit „Web Vitals“ beschriftet ist und darin auch den LCP. Möchte man jedoch das größte Element herausfinden, dass für den „Largest Contentful Paint“ verantwortlich ist, nutzt man besser die Zeile „Timings“ unter „Interaction“ anklicken und erfährt unter „Related Node“ welches HTML-Element offenbar das größte zu ladende ist.

Debugging mit Google Page Speed Insights

In der neuesten Version des Google Page Speed Insights-Tools, werden bei Problemen mit dem LCP ebenfalls hilfreiche Ansatzpunkte geliefert. Früher sah man dort nur allgemeine Vorschläge für die Verbesserung der Ladezeit. Mittlerweile lassen sich diese mittels Filter auf einen Core Web Vitals Wert einschränken.

Damit werden nur noch die Prüfungen angezeigt, die für den ausgewählten Messwert relevant sind:

pagespeed-insights-lcp

4. LCP verbessern: Wie behebe ich nun das LCP-Problem?

Ganz allgemein lässt sich das leider nicht beantworten. Prinzipiell kann es daran liegen, dass das betreffende Element selbst zu groß ist oder aber auch daran, dass andere Assets, die noch davor geladen werden, schlicht das Laden dieses größten sichtbaren Elements verzögern. Kommt die Dateigröße des Elements als Ursache in Frage, wie es bei Bilddateien und Fotos häufig der Fall ist, hilft es meist schon, dise mit Tools wie bspw. TinyPNG zu komprimieren, oder auch auf ein anderes Dateiformat wie WebP zu wechseln. Außerdem solltest du natürlich sorgen, dass die Bilddatei tatsächlich nur soviele Pixel enthält, wie für die Darstellung im Layout auch tatsächlich benötigt werden. Sogenannte „Responsive Image Techniken“ helfen, falls in verschiedenen Viewports und Pixel-Ratios unterschiedlich große Bilder benötigt werden.

Falls das Element selbst garnicht das Problem ist, sondern andere Ressourcen die Seite ausbremsen, muss man natürlich dort ansetzen. Häufig hilft es anstatt Renderblocking-CSS ein sogenanntes kritisches CSS zu erstellen, das bereits alle notwendigen Regeln für die Darstellung Above-The-Fold enthält (Critical CSS) und diese Inline im Kopf der Seite einzubinden. JavaScripts, die das Rendern blockieren lassen sich häufig mittels des Attributs „defer“ aufschieben, bis das HTML vollständig geladen wurde.

5. Validiere deine Maßnahmen

Nachdem Du die notwendigen Änderungen an deiner Seite vorgenommen haben, gehst du am besten nochmal zurück zum Page Speed Insights-Tool oder in die DevTools und überprüfst deine Seite erneut. Wenn Du nun den Core Web Vitals Test bestehst, also der LCP nun besser als 2,5s ist, solltest du in den Core Web Vitals Bericht der Search Console gehen und dort auf „Fehlerbehebung überprüfen“ bzw. „Validate Fix“ in der englischen Search Console klicken.

Problem mit LCP - fehlerbehebung mit google search consoleDies teilt Google mit, dass du Änderungen vorgenommen, um die Ladegeschwindigkeit deiner Seite zu verbessern bzw. das LCP-Problem zu beheben. In der Folge sammelt Google neue Daten und informiert, sobald genügend Daten vorliegen, ob das Problem erfolgreich behoben worden ist oder du doch noch einmal nachbessern musst.

Viel Erfolg bei der Optimierung!