Metrik Largest Contentful Paint (LCP): Ein Leitfaden für schnellere Ladezeiten

Die Welt der Metrik Largest Contentful Paint (LCP) lässt sich mit dem adrenalingeladenen Umfeld von Autorennen vergleichen – es ist ein endloser Wettlauf gegen die Zeit. Lassen Sie uns nun alle Kurven und Tücken unserer Rennstrecke durchfahren, um bestens vorbereitet zu sein. Was werden wir also lernen?

• Was ist die LCP-Metrik?
• Welche Werte werden empfohlen?
• Warum ist sie wichtig?
• Wie wird die LCP-Metrik berechnet?
• Wie und wo empfehlen wir die Messung?
• Welche häufigen Fehler und Optimierungsmöglichkeiten gibt es?

Lernen Sie die LCP-Metrik kennen#

Die LCP-Metrik misst die Zeit bis zur Darstellung des größten Elements auf der Seite. Dies hilft den Nutzern, die Nützlichkeit einer Seite zu bewerten.

Diese Metrik ist Teil der Core Web Vitals, die zur Messung der Ladegeschwindigkeit von Webseiten genutzt werden. Die Core Web Vitals sind auch ein Signal, das von Google bei der Suchergebnisreihung berücksichtigt wird.

Halten Sie LCP unter 2,5 Sekunden#

Wenn Sie möchten, dass Ihr Largest Contentful Paint im grünen Bereich liegt, muss der Wert unter 2,5 Sekunden liegen. LCP zwischen 2,5 und 4 Sekunden befindet sich im orangenen Bereich und erfordert Anpassungen. Zeiten über 4 Sekunden werden von Google als unzureichend eingestuft.

	Gut	Verbesserungsbedürftig	Schlecht
LCP	≤ 2,5 s	2,5 - 4 s	> 4 s

Die LCP-Metrik ist aus mehreren wesentlichen Gründen wichtig, die erheblichen Einfluss auf das gesamte Nutzererlebnis und den Erfolg von Websites haben.

Dazu gehören beispielsweise die Reduzierung der Absprungrate, der Einfluss auf E-Commerce-Konversionen, die Glaubwürdigkeit der Marke oder die Platzierung in den Suchergebnissen.

Die LCP-Metrik korreliert bei unseren Kunden-Websites oft mit der Konversionsrate. Dies tun wir im Rahmen der Konversionsanalyse.

Was ist ein LCP-Element?#

Einfach gesagt, handelt es sich um das größte visuelle Element auf der Seite, das während des Seitenladevorgangs im Haupt-Viewport des Nutzers angezeigt wird. Der LCP-Element ist das Element, das der Browser verfolgt und die Zeit misst, bis es angezeigt wird.

Ein LCP-Element kann in einigen Entwicklertools identifiziert werden – Lighthouse, Performance-Tab in den DevTools oder das Web Vitals Chrome-Add-on. Ausführlich können Sie über die Suche und das Testen (nicht nur) von LCP in meinem Artikel Schlüsselkompetenz eines Entwicklers: Web Vitals im Browser testen nachlesen.

Als LCP-Element können folgende Elemente bewertet werden:

• <img>-Elemente
• <image>-Elemente innerhalb eines <svg>-Elements
• <video>-Elemente mit „Poster“-Bild
• Hintergrundbilder, die mit der background-image-Eigenschaft definiert sind (CSS-Gradienten werden ignoriert)
• Block-Elemente mit Text oder weiteren Inline-Textnachkommen

LCP-Elemente können hingegen nicht folgende Elemente sein:

• Elemente mit der Eigenschaft opacity: 0 und anderen, die für den Nutzer unsichtbar sind.
• Elemente, die den gesamten Viewport ausfüllen. Diese werden eher als illustrativ denn als inhaltlich betrachtet.
• Platzhalterbilder mit geringem Informationswert. Dies schützt vor LCP-Hacks, bei denen Entwickler große, informationsfreie Bilder auf die Seite einfügen. Wenn Sie Zweifel an der Informationsdichte Ihrer Bilder haben, können Sie sie mit dem Image BPP Calculator testen.

Die Grundlage ist die Identifizierung des „LCP-Elements“. Beachten Sie, dass es in verschiedenen Auflösungen ein anderes Element sein kann.

Sehen Sie, wie man das LCP-Element findet.

Wie wird das LCP-Element bewertet?#

Um die Metrik LCP korrekt zu bewerten und zu optimieren, ist es wichtig zu verstehen, wie sie berechnet wird. Bei einem LCP-Element wird in der Regel seine auf dem Bildschirm des Nutzers sichtbare Größe bewertet. Beschnittene Teile, mit overflow:hidden versteckte Teile sowie Eigenschaften wie padding, margin und border werden nicht berücksichtigt. Wenn Sie mehr über die Bewertung von LCP erfahren möchten, gibt es dazu einen empfehlenswerten Artikel auf web.dev.

Messen des LCP auf Ihrer eigenen Website#

Eine zuverlässige Datenquelle für Core Web Vitals-Metriken sind Datensätze aus dem Chrome UX Report (CrUX). Mit diesen Daten können Sie sowohl für die gesamte Domain als auch für einzelne URLs arbeiten. Das detaillierte Verteilungsmuster der LCP-Werte bei Nutzern auf Origin-Ebene zeigt ein Histogramm.

Die Arbeit mit rohen CrUX-Daten erfordert allerdings erhebliche technische Fähigkeiten. Glücklicherweise gibt es bereits Tools, die diese Daten automatisch verarbeiten und in Diagrammen anzeigen. Dazu gehören PageSpeed.ONE oder Pagespeed Insights.

Grundlegende Daten zum Zustand der LCP-Metrik erhalten Sie durch unseren Web-Geschwindigkeitstest oder PageSpeed Insights. Wenn Sie den Verlauf über die Zeit im Blick behalten möchten, probieren Sie unseren Web-Geschwindigkeitstest.

Wenn Sie die Einschränkung auf Nutzer des Chrome-Browsers als zu begrenzt empfinden, können Sie immer auf eigene Messungen mit RUM (Real User Monitoring) zurückgreifen oder Ihre eigene Datenerfassung mit JavaScript und dem Performance Observer API schreiben.

Die Google Search Console ist eine der Quellen, die uns wichtige Informationen über Prioritäten bei der Optimierung von LCP liefern.

Eine weitere Möglichkeit sind synthetische Messungen, die Sie mit Tools wie SpeedCurve, Google Lighthouse, WebPageTest und ähnlichen durchführen können.

Über die Unterschiede zwischen den Messungen schreiben wir auf einer speziellen Seite: synth vs. CrUX vs. RUM.

Fehler und Optimierungsmöglichkeiten bei LCP#

Die LCP-Metrik ist ziemlich komplex. Es ist wichtig zu verstehen, dass viele Faktoren sie beeinflussen können. In erster Linie handelt es sich um kritische Ressourcen für das erste Rendering:

• Backend-Antwortzeit (Metrik TTFB).
• Größe und Komplexität des HTML.
• Größe von CSS und anderen kritischen Ressourcen.

Die Optimierung der Backend-Antwortzeit (TTFB) hilft oft bei der Verbesserung der LCP-Metrik.

Aber auch asynchrone Ressourcen wie Bilder oder Webfonts, die das LCP-Element bilden können, zählen zur LCP. Die LCP kann daher auch durch Folgendes beeinflusst werden:

• Format, physische und Datenmenge des Bildes selbst.
• Größe der Schriftdateien usw.
• Vorhandensein eines Bildes im Poster-Attribut des <video>-Tags.

Halten Sie also generell alle Zeiten und Größen auf einem möglichst niedrigen Niveau. Unser geheimer Tipp? Verwenden Sie Lazy Loading für Bilder und nutzen Sie es richtig.

Hier finden Sie weitere Tipps zur Bildoptimierung auf der Website.

Hier würde Lazy Loading helfen. Faul geladene Bilder (alle außer dem ersten) würden die Priorisierung des ersten Bildes unterstützen, das Einfluss auf LCP hat.

Aber auch komplexere Anpassungen können die LCP verbessern, die wir unten beschreiben:

Lazy Loading kann LCP schaden#

Die Regel besagt, dass Bilder ohne Lazy Loading im Browser zuerst geladen werden. Bilder mit Lazy Loading erst später, selbst wenn sie im sichtbaren Bereich des Viewports sind. Wenn Sie Lazy Loading auf einem Bild haben, das zugleich das LCP-Element ist, wird es erheblich später geladen, was die LCP-Zeit erhöht. Entfernen Sie daher Lazy Loading von LCP-Elementen auf Ihrer Website und fügen Sie Lazy Loading für alle anderen Elemente hinzu:

<img src="image-non-lcp.webp" loading="lazy" alt="Image" />

Fetch Priority beschleunigt den Datei-Download#

Eine komplexe HTML-Struktur oder zu viele herunterzuladende Dateien können dazu führen, dass unser LCP-Element zu spät geladen wird. Mit dem fetchpriority-Attribut können wir jedoch die Priorität einer ausgewählten herunterzuladenden Datei erhöhen. Dies verbessert die LCP-Metrik. Allerdings sollte man mit dieser Technik vorsichtig umgehen und den Effekt gründlich testen.

<img src="image.webp" fetchpriority="high" alt="" />

Preload von Webfont-Ressourcen für LCP-Elemente#

Wenn Sie feststellen, dass ein Textelement als LCP-Element bewertet wird, müssen Sie das schnelle Herunterladen der Webfont-Dateien und deren Darstellung sicherstellen. Um dieses Ziel zu erreichen, können Sie Preload-Techniken nutzen. Eine kleine Warnung: Mit Preload sollten Sie sparsam umgehen, deshalb laden Sie nur den einen Font-Schnitt vor, der Einfluss auf LCP hat:

<link rel="preload" href="font-1.woff2" as="font" type="font/woff2" crossorigin />

Sehen Sie sich unseren Text zur Optimierung von LCP an.

Was Sie sich über LCP merken sollten#

• Largest Contentful Paint (LCP) ist eine Metrik, die die Zeit misst, bis das größte visuelle Element auf der Seite angezeigt wird.
• Empfohlene Werte für LCP sind unter 2,5 Sekunden, 2,5 - 4 Sekunden erfordern Anpassungen und über 4 Sekunden ist LCP unzureichend.
• LCP ist ein wesentlicher Bestandteil der Core Web Vitals, der das Nutzererlebnis beeinflusst und oft auch die Absprungrate, die Konversionen von E-Shops oder deren Platzierung in Suchmaschinen.
• Bei der Optimierung von LCP konzentrieren Sie sich auf die Verbesserung der Ladegeschwindigkeit kritischer Ressourcen, die richtige Verwendung von Lazy Loading oder die Nutzung des fetchpriority-Attributs zur Erhöhung der Download-Priorität von Dateien.

Die LCP-Metrik ist Teil unserer einheitlichen Geschwindigkeitsmetrik, dem PageSpeed.ONE Score (SPS).

Wir haben jahrelange Erfahrung mit der Optimierung von LCP#

Unsere langjährige Zusammenarbeit mit dem Projekt Footshop.cz begann mit der Optimierung von LCP. Hier haben wir unter anderem den Übergang von clientseitigem Rendering, das mit einem Service Worker zwischengespeichert wurde, zu serverseitigem Rendering optimiert. Das Ergebnis ist eine 2,5-fach bessere LCP-Geschwindigkeit auf Mobilgeräten.

Abbildung aus dem Hauptbild: Unsplash.