Core Web Vitals – Largest Contentful Paint (LCP) verbessern

13. Juli 2021

Beitrag teilen:

Tipps und Tricks um deine LCP zu optimieren

Zu den insgesamt drei Core Web Vitals Metriken gehört auch der Largest Contentful Paint – kurz LCP Wert. Wir schauen uns einmal genauer an, was der LCP eigentlich ist, was ihn beeinflusst und wie du bei Problemen den LCP gezielt verbessern und so deine Core Web Vitals Werte optimieren kannst – egal ob WordPress oder ein anderes CMS.

💡 Lies hier mehr zu unserer Core Web Vitals Reihe:

Falls du also feststellen solltest, dass deine Webseite Probleme mit dem LCP hat, entweder weil in der Google Search Console ein Hinweis auf „zu optimierende URLs“ oder sogar „schlechte URLs“ aufgetaucht ist, zeigen wir dir jetzt, was du sofort tun kannst.

Inhaltsverzeichnis

Was ist der Largest Contentful Paint?
LCP mit Lighthouse analysieren
LCP Debugging mit Google Page Speed
LCP verbessern: Wie behebe ich nun das LCP-Problem?
LCP Maßnahmen validieren

1. Was ist der Largest Contentful Paint?

Der Largest Contentful Paint gehört zu den Core Web Vitals. Der LCP Wert misst im Rahmen der Core Web Vitals KPI die Ladezeit, die sog. Renderzeit, die vergeht, bis das größte Content Element auf einer Webseite geladen wird. Content Elemente können dabei Bilder, Videos, Texte oder auch Elemente im Hintergrund sein.

Im Durchschnitt werden LCP Werte bis zu 2,5 Sekunden Ladezeit von Google als gut eingestuft, Werte von 2,5 Sekunden bis 4 Sekunden als verbesserungswürdig und ab 4 Sekunden als schlecht. Google selbst hat eine sehr transparente Darstellung der Core Web Vitals Werte angestrebt, weswegen es eine Informationsseite zum LCP von Google selbst gibt.

2. LCP mit Lighthouse analysieren

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 gar nicht so einfach das Problem zu identifizieren. Bei einem schlechten LCP startest du 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.

So startest du die Analyse im Browser

Öffne die entsprechende URL in einem Inkognito-Fenster.
Öffne die Entwicklertools (DevTools). Für Windows kannst du hier die Tastenkombination F12 oder STRG + SHIFT + I verwenden. Für macOS benötigst du die Tastenkombination CMD + Option + I. Alternativ reicht auch ein Rechtsklick auf der Seite der Entwicklertools. Dort kannst du dann im Menü auf „Untersuchen“ klicken.
Wechsel in den Reiter „Lighthouse“ in den nun sichtbaren Developer Tools.
Wähle aus ob der LCP Wert in der Desktop oder mobilen Ansicht getestet werden soll. Bei den Kategorien reicht es aus „Performance“ auszuwählen.
Klicke anschließend 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, kannst du dich an die Optimierung machen.

TIPP 💡

Wichtig bei der Optimierung ist es, stets an Desktop- und Mobile-Ansicht zu denken und beide Versionen zu testen. 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:

Hier findest du nun eine Zeile, die mit „Web Vitals“ beschriftet ist und darin auch den LCP-Wert. Möchtest du jedoch das größte Element herausfinden, dass für den „Largest Contentful Paint“ verantwortlich ist, nutzt du besser die Zeile „Timings“ unter dem Punkt „Interaction“. Unter „Related Node“ erfährst du dann welches HTML-Element offenbar das größte zu ladende ist.

3. LCP Debugging mit Google Page Speed

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:

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

Im ersten Schritt solltest du ein schnelles und leistungsstarkes Managed WordPress Hosting einsetzen. Damit kannst du die Latenz und Ladezeiten deutlich senken, was zu einer Verbesserung des Largest Contentful Paints sorgen wird. Falls du danach noch Probleme mit dem LCP hast, musst du detaillierter nachsehen, woran es liegen kann.

Ganz allgemein für jede Webseite lässt sich aber leicht nicht beantworten, wo genau das Problem liegen könnte. 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, diese mit Tools wie bspw. TinyPNG zu komprimieren, oder auch auf ein anderes Dateiformat wie WebP zu wechseln. Außerdem solltest du natürlich darauf achten, dass die Bilddatei tatsächlich nur so viele 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, musst du 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. LCP Maßnahmen validieren

Nachdem du die notwendigen Änderungen an deiner Seite vorgenommen hast, 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,5 Sekunden 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.

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

Mehr Informationen zu unserer Core Web Vitals Reihe

Kai Spriestersbach

Kai Spriestersbach, M.Sc. Web Science, ist Inhaber von SEARCH ONE und unterstützt Unternehmen als externer Marketing- und Digital Stratege und gründet gerade ein Unternehmen auf Basis seiner Forschung im Rahmen der Master Thesis. Kai ist einer der erfahrensten Search Marketing Experten im deutschsprachigen Raum und hat sich in den letzten Jahren intensiv mit künstlicher Intelligenz, Natural Language Processing (NLP) und Information Retrieval beschäftigt. Als Experte für die Texterstellung mit Hilfe von KI-Tools veröffentlichte er 2023 ein Sachbuch über das Schreiben mit Hilfe von KI.