Largest Contentful Paint (LCP Google)

Der Largest Contentful Paint ist ein von Google definierter „Meilenstein“ im Ladeprozess einer 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 Document Object Model (DOM) repräsentiert werden (Sagen wir vereinfacht: das 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.

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