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!

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?

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

Lerne alles über PageSpeed und die Core Web Vitals

PageSpeed Seminar - Core Web Vitals OnlinekursMit einer Zusatzqualifikation im Bereich der Ladezeitenoptimierung kannst du deinen Marktwert und deinen Umsatz steigern. Nach diesem Kurs bist du in der Lage deinem Unternehmen und deinen Kunden einen wertvollen Zusatznutzen mit der Optimierung des PageSpeeds zu bringen und kannst professionelle Beratungsleistungen oder Hands-On-Dienstleistungen erbringen.

Nutze meinen Kurs, um Deine eigene Webseiten oder die Webseiten Deiner Kunden auf das Google Page Experience Update vorzubereiten.

Ich vermittle Dir nicht nur die theoretischen Hintergründe für ein umfassendes Verständnis, sondern zeige direkt am Rechner wie ich in der Praxis arbeite. Gemeinsam sehen wir uns alle relevanten Tools und Techniken an, die bei der Analyse und Optimierung der Ladezeit hilfreich sind. Dabei erkläre ich jeden Schritt detailliert und gebe Dir Vorlagen für fertige Workflows, Checklisten, Tools und Anbieterempfehlungen an die Hand. Durch die enthaltenen Analysen unterschiedlicher Beispielwebseiten, lernst Du die häufigsten Fehler, Probleme und Fallstricke aus der Praxis kennen und baust so ein eigenes Repertoire an Lösungsansätzen auf.

Mit meinen Kursen kannst Du Dich zeit- und ortsunabhängig weiterbilden.

Dabei kannst Du Dir das Tempo und Deine Aktivitäten selbst festlegen. Für Dich heißt das, dass Du Dir die von mir digital zur Verfügung gestellten Inhalte eigenständig in aller Ruhe aneignen kannst und die Seminarunterlagen zur Vertiefung und Anwendung des Gelernten nutzen kannst.

Jetzt den Onlinekurs PageSpeed & Web Vitals vormerken

5/5 - (5 votes)