Nehmen Sie Kontakt auf!

EINGENETZT Webentwicklung

Im E-Port Dortmund
Mallinckrodtstrasse 320
44147 Dortmund-Hafen

0231 - 9921 9905
info@eingenetzt.net

Nutzen Sie auch die Kontakt-Buttons unten rechts!

Largest Contentful Paint (LCP Google)

Zuletzt aktualisiert:
  • Was ist der Largest Contenful Paint
  • Optimierungsansätze
  • Was sagt Google selbst über den LCP?
Largest Contentful Paint - LCP - Titelbild

Der Largest Contentful Paint ist ein von Google definierter „Meilenstein“ im Ladeprozess eine Website-URL, der bedeutsam für die Nutzererfahrung ist. Der LCP gehört zu den Core Web Vitals und ist damit Rankingfaktor.

Bedeutung und Messung des Largest Contentful Paint

Vermutlich weißt du jetzt immer noch nicht genau, was damit gemeint ist. Also nähern wir uns der Sache weiter: eine Webseite besteht aus verschiedenen Elementen, welche im sogenannten DOM repräsentiert werden (Sagen wir vereinfacht vor der DOM ist das HTML deiner Website).

Das können Bilder, Abschnitte, Texte, Blöcke uvm. sein. Einigen dieser Element-Typen rechnet Google zu, dass diese „Contentful“ sind, also dass sie „bedeutungsvolle Inhalte“ sind.

Dies betrifft folgende Element-Typen:

HTML-Eelmente:
<img> - Bildelemente
<svg> - SVG Grafiken
<video> - Videos

Elemente mit folgenden CSS Attributen:
background-img: url(); 
display: block;

Weitere Bedingung ist, dass diese Elemente im sofort Sichtbaren Bereich, dem sogenannten „Initial Viewport“ liegen. Alle der o.g. Elemente, die im Initial Viewport liegen, kommen für den Largest Contentful Paint in Frage.

Zur Messung des LCP wird ganz einfach die Zeit ab der ersten Server Anfrage gestoppt. Jedes der Contentful Paint Element im Initital Vieport ist nach einer bestimmten Zeit fertig geladen und sichtbar.

Der Largest Contentful Paint Wert ist der Zeitpunkt, an dem das letzte Contentful Paint Element geladen wurde. Er wird also in Sekunden gemessen.

Als Richtwerte für den LCP gibt Goggle folgendes an:

LCP < 2,5 Sekunden = GUT

LCP < 4 Sekunden = Verbesserung notwendig

LCP > 4 Sekunden = SCHLECHT

Wichtig: Alles, was nicht gut ist, kann dazu führen, dass der Core Web Vitals Test als nicht bestanden gilt und es zu Abwertungen bei den Rankings kommen kann.

Wie bei allen Core Web Vitals sind auch beim Largest Contentful Paint die tatsächlichen Nutzerdaten ausschlaggebend, keine „Stichproben“ welche mit irgendwelchen Online Tools aufgenommen werden können. Schaue dir dazu meinen Beitrag über Core Web Vitals an.

Ursachen & Optimierung des Largest Contentful Paint

In der Praxis sind oft große unkomprimierte Bilder der Grund für hohe LCP Werte. Häufig ist aber garnicht das für den Largest Contentful Paint maßgebliche Element selbst die Ursache sondern lädt einfach nur so spät, weil im Vorfeld alles andere auch schon „spät dran“ war.

Nutzt du wie im Beitrag über die Core Web Vitals beschrieben die Google Page Speed Insights zur Messung des LCP siehts du noch weitere Werte, die dir darauf einen Hinweis geben können.

Ergeben sich hier schon schlechte (rot gekennzeichnete Werte) für Total Blocking Time und First Contentful Paint, ist am LCP relevanten Element nicht mehr viel zu retten.

Ursache Largest Contentful Paint
Bild: Wenn der Server schon 10 Sekunden auf sich warten lässt (Total Blocking Time), erhöhen sich auch die später folgenden Messungen wie LCP.

In so einem Fall sind „allgemeine“ Maßnahmen wie Caching angebracht und ggf. ein Wechsel des Hosters (bei managed Hosting). Außerdem sollte das laden von „Render Blocking“ Ressourcen (CSS und Javascript) geprüft werden. In meinem Beitrag über die Core Web Vitals habe ich weitere Maßnahmen angerissen.

Ist jedoch nur der Largest Contentful Paint mangelhaft, sollte man sich das betroffene Element genauer ansehen. Dazu muss man dieses natürlich erstmal identifizieren. Dabei besteht das Problem, dass das Element, welches für den LCP Wert verantwortlich ist von Ladevorgang zu Ladervorgang wechselt.

Es ist zwar möglich mit Hilfe der Chrome Entwicklertools das LCP Element für einen bestimmten Ladevorgang zu identifizieren, jedoch kann es durchaus sein, dass es weitere problematische Elemente gibt. Es macht daher Sinn nach „üblichen“ verdächtigen Ausschau zu halten und sicherzustellen, dass alle Contentful Elemente nach Best Pratices eingebunden wurden.

Willst du dennoch zunächst eine Analyse machen, findest du hier eine Anleitung, wie du den LCP mit den Chrome Entwicklertools im Performance Tab messen kannst. Unten in den FAQs findest du eine Kurzversion der Anleitung.

Ansonsten halte nach folgendem Ausschau:

  • Große unkomprimierte Bilder & Videos (verkleinern und komprimieren)
  • Falsche Video und Foto Formate, z.B. png bei Fotos (Format ändern)
  • Nicht optimal programmierte Slider (Leider ca. 90% aller WordPress Slider)
  • Lazy Loading von Contentful Paint Elementen (Dies wird dir als Empfehlung in den Page Speed Insights angezeigt – wie du es löst hängt davon ab wie Lazy Loading implementiert ist)

Versuche erstmal die Maßnahmen aus dem oben verlinkten Beitrag zu den Core Web Vitals. Solltest du damit nicht ans Ziel kommen, benötigst du ggf. Unterstützung von einem Webentwickler oder (für WP Nutzer) einer WordPress Agentur.

Googles Rat zum Largest Contentful Paint

In diesem Video erfährst du Googles Sichtweise zum Largest Contentful Paint.

Häufig gestellte Fragen

Was ist ein guter Wert für den Largest Contentful Paint (LCP)

Der Largest Contentful Paint sollte unter 2,5 Sekunden liegen, damit er sich nicht negativ auf Rankings auswirkt. Entscheidend sind echte Nutzerdaten, keine Einzelmessungen.

Wie finde ich das Largest Contentful Paint (LCP-) Element?

Das LCP Element kann bei Ladevorgängen auch wechseln. Für einen einzelnen Ladervorgang kannst du es mit den Chrome Entwicklertools herausfinden. Dort gehst du in den Tab „Performance“ startest eine Aufzeichnung und lädst die entsprechende URL in diesem Tab. Durch Hovern über das LCP Zeichen in den Ergebnissen, wird im Browser das LCP Element hervorgehoben.

Benutzt ihr Page Builder?

Nein. Page Builder wie Elementor und Co. sind „Quick & Dirty“ Lösungen und haben in den meisten Fällen langfristig viele Nachteile, inklusive langer Ladezeiten, schlechter User Experience und fehlende Migrirbarkeit. Zudem ist es für Laien deutlich schwieriger Inhalte zu pflegen, was den Sinn eines Content Management Systems ad absurdum führt.

5/5 - (1 Bewertungen)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Nehmen Sie Kontakt auf!

EINGENETZT Webentwicklung

Im E-Port Dortmund
Mallinckrodtstrasse 320
44147 Dortmund-Hafen

0231 - 9921 9905
info@eingenetzt.net

Nutzen Sie auch die Kontakt-Buttons unten rechts!