4 Expertenstrategien zur Behebung größter Contentful Paint (LCP) Webinar-Zusammenfassung

Drei Jahre nach der Einführung von Core Web Vitals haben unglaubliche 33 % der Websites weltweit immer noch Schwierigkeiten, die notorisch herausfordernde Metrik – Largest Contentful Paint (LCP) – zu bestehen.

Um dieses Problem anzugehen, haben wir uns mit Google zusammengetan und die vierteilige Webinar-Reihe „Core Web Vitals For Your Business“ gestartet. Die dritte Episode, die der Beherrschung der LCP-Optimierung gewidmet ist, kann jetzt auf YouTube wiedergegeben werden:

In dieser Sitzung diskutieren die Top-Köpfe von Google, Barry Pollard und Adam Silverstein, zusammen mit dem CTO von NitroPack, Ivailo Hristov:

• Die neuesten Entwicklungen und Änderungen rund um LCP
• Was macht LCP zur am schwierigsten zu optimierenden Core Web Vitals-Metrik?
• Live-Techniken zur Verbesserung schlechter LCP-Werte

Lesen Sie weiter, um die Webinar-Highlights und eine umsetzbare Checkliste zur Behebung Ihres LCP von „Fehlgeschlagen“ auf „Bestanden“ zu sehen.

Was ist Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) ist eine Core Web Vitals-Metrik, die die Renderzeit des größten Elements im Ansichtsfenster im Verhältnis zum ersten Ladebeginn der Seite misst. Dies ist besonders wichtig für das Benutzererlebnis, da es Ihnen hilft, die wahrgenommene Ladeleistung aus der Sicht eines Benutzers zu verstehen.

Ein verzögerter LCP kann darauf hinweisen, dass das Laden des Hauptinhalts einer Seite zu lange dauert, was dazu führen kann, dass Benutzer den Eindruck haben, dass sie langsam ist. Verwenden Sie die folgenden Schwellenwerte, um Ihren LCP-Score zu messen:

• Unter 2,5 s ist gut
• 2,5–4,0 s bedeuten, dass eine Verbesserung erforderlich ist
• Über 4,0 s gelten als mangelhaft

Was gilt als LCP-Element?

Abhängig von der Struktur und dem Inhalt einer Webseite können verschiedene Elemente als größtes Inhaltselement betrachtet werden.

Jedes der folgenden Elemente kann als die größten Kandidaten für Inhaltselemente klassifiziert werden:

• Bilder: Dazu gehören Bilder, die mit dem img- Tag geladen wurden, sowie Bilder, die per CSS als Hintergrund verwendet werden und im Ansichtsfenster angezeigt werden.
• Bildelemente innerhalb eines SVG- Elements: Wenn eine SVG Bildelemente enthält (z. B. über das Image- Tag), können diese als LCP gemeldet werden.
• Videos: Das Posterbild des Videos (das Bild, das vor der Wiedergabe des Videos angezeigt wird) kann das LCP sein. Der Video-Frame selbst kann auch das LCP sein, wenn kein Posterbild vorhanden ist und das Video ohne Benutzerinteraktion automatisch abgespielt wird.
• Animierte Bilder: Zum Beispiel das erste Bild animierter GIFs.
• Textelemente auf Blockebene: Dies betrifft Textelemente wie Überschriften (h1, h2 usw.), Absätze (p), Listen (ul, ol usw.) und andere. Der Textblock, der im Ansichtsfenster den größten Platz einnimmt, kann ein LCP-Kandidat sein.
• Elemente mit einem über CSS geladenen Hintergrundbild: Wenn für ein Element, wie z. B. ein div oder ein Abschnitt , mithilfe der Eigenschaft „background-image“ in CSS ein Hintergrundbild festgelegt wurde und dieses Bild den größten sichtbaren Inhalt darstellt, kann es sich um das LCP handeln.

So finden Sie das LCP-Element auf einer Webseite

Intern identifiziert der Chrome-Browser beim Rendern des Seiteninhalts verschiedene LCP-Elemente. Das bedeutet, dass sich das LCP-Element beim ersten Laden der Seite ändert, bis das „above-the-fold“-Element geladen wird, um das definitiv größte Element anzuzeigen.

Wichtiger Hinweis: Abhängig von den unterschiedlichen Bildschirmgrößen kann das LCP-Element derselben Webseite variieren.



Glücklicherweise können Sie mit Tools wie Chrome DevTools und WebPageTest das spezifische LCP-Element für ein bestimmtes Seitenladeszenario leicht identifizieren.

1. Mit Chrome DevTools

• Klicken Sie mit der rechten Maustaste irgendwo auf die Seite und wählen Sie „Inspizieren“.
• Gehen Sie auf den Reiter „Leistung“ und laden Sie die Seite einfach neu
• Sobald die Seite geladen ist, wird eine Zeitleiste der Ereignisse angezeigt
• Suchen Sie im Abschnitt „Zeitpläne“ nach der Markierung „LCP“ und scrollen Sie nach unten, um auf der Registerkarte „Zusammenfassung“ weitere Details anzuzeigen
• Bewegen Sie den Mauszeiger über den Link „Verwandter Knoten“, um das LCP-Element auf der Seite hervorzuheben

2. Mit WebPageTest

• Geben Sie unter www.webpagetest.org die URL der Webseite ein und starten Sie den Test
• Sobald der Test abgeschlossen ist, gehen Sie zur Registerkarte „Page Performance Metrics“ und klicken Sie auf „Largest Contentful Paint“.
• Sie finden Details zum LCP, einschließlich eines Screenshots, der das LCP-Element hervorhebt.

Was ist neu bei Largest Contentful Paint (LCP): Updates und Entwicklungen

Seit der Einführung der wichtigsten Core Web Vitals-Metriken wurden sie kontinuierlich aktualisiert, um Grenzfälle und die Entwicklung der Webleistung zu berücksichtigen.

LCP-Änderungen im Chrome-Browser

Chrome hat bereits einige Änderungen vorgenommen, wobei der Schwerpunkt auf dem Ausschließen und Einschließen von Elementen basiert, je nachdem, wie „inhaltlich“ sie sind:

• Chrome 86 – Bilder mit einer Deckkraft von 0 wurden ausgeschlossen
• Chrome 88 – Vollbildbilder (normalerweise Hintergrundbilder) wurden ausgeschlossen
• Chrome 112 – Bilder mit niedriger Entropie wurden ausgeschlossen (also sehr einfache Bilder, z. B. ein großes blaues Quadrat)
• Chrome 116 – Videos enthalten (erstes Bild)
• Chrome 116 – GIFs wurden geändert, um das erste Bild zu verwenden
• Chrome 116 – Experimente zum Laden von Bildern (jetzt „schaut“ sich der Browser vorher einige Bilder an und legt fest, welche möglicherweise Kandidaten für LCP-Elemente sind)

LCP-Änderungen in WordPress

Nach der Einführung eines WordPress Core Performance Teams im Jahr 2021 hat WordPress stark investiert, um die Plattform leistungsfreundlicher zu gestalten.

Die WordPress-Versionen 6.2 und 6.3 zeigten massive Verbesserungen, wobei wir 27 % schnellere Ladezeiten für Block-Themes und 18 % für klassische Themes sehen. Die Gesamterfolgsquote der CWVs für WordPress-Websites auf Mobilgeräten liegt bei 34,71 %, verglichen mit 30,47 % im April.

Zu den vom WP Core Performance Team vorgenommenen Änderungen, die sich positiv auf den Largest Contentful Paint auswirken, gehören:

• Einführung der nativen Unterstützung des WebP-Bildformats seit Version 5.8
• Automatische Konvertierung hochgeladener Bilder
• Reduzierung der Datenbankabfragen für häufige Seitenladevorgänge
• Feinabstimmung von Hochfrequenz-Codepfaden
• Verbesserungen an der Caching-Ebene
• Verbesserungen beim automatischen nativen HTML-Lazy-Loading
• Einführung des automatischen fetchpriority=“high“ für das LCP-Element
• Einführung der Skript-API-„Strategie“, bei der Entwickler eine Asynchron- oder Verzögerungsstrategie für Header-Skripte angeben

Warum scheitern Sie bei Largest Contentful Paint? (Häufige Fehler)

Es gibt einen Grund, warum LCP immer noch die am schwierigsten zu verteilende CWV-Kennzahl ist. Und es ist nicht unbedingt Ihre Optimierungsstrategie.

Falle Nr. 1: Sie haben nicht die vollständige Kontrolle über Ihren LCP-Score

LCP ist insofern komplex, als beim ersten Ladevorgang viel passiert und Sie möglicherweise nicht jeden Schritt beeinflussen können.

Wenn Besucher über eine Anzeige mit einem verkürzten Link auf Ihre Website gelangen, kann es zu mehreren Weiterleitungen kommen, bevor der Benutzer den Inhalt Ihrer Website überhaupt sieht. Darüber hinaus spielt die Netzwerkstärke eine große Rolle, insbesondere wenn Ihre Website Besucher aus Ländern mit langsameren Verbindungen hat.

„Es kann nervig sein, weil man es irgendwie nicht kontrollieren kann. Man kann diese Dinge nicht einfach auf magische Weise reparieren. Sie müssen verstehen, wo das Problem selbst liegt – liegt es an Ihrer Seite oder liegt es eher an der Art und Weise, wie die Leute auf Ihre Website gelangen.“

– Barry Pollard, @Google Chrome-Team

Falle Nr. 2: Das Design Ihrer Website passt nicht zu Ihren demografischen Merkmalen

Um auf die Kernidee hinter den Core Web Vitals-Metriken zurückzukommen: Bei LCP geht es darum, zu messen, wiereale Benutzer das anfängliche Laden Ihrer Webseite erleben.

Es ist großartig, eine High-End-Website zu erstellen, die alle Extras bietet. Was aber, wenn Ihre Besucher aufgrund älterer Geräte und langsamerer Netzwerkverbindungen nicht auf Ihre Website zugreifen können? Denken Sie daran, dass komplexes Webdesign mehr HTTP-Anfragen und langsame Ladezeiten bedeutet.

Wenn alles andere nicht zu funktionieren scheint, hilft Ihnen und Ihrem Team ein erneuter Blick auf die Grundlagen in Bezug auf Demografie und Gerätetypnutzung :

• Führen Sie relevantere UX-Designänderungen ein
• Benutzerbedingungen in Testumgebungen besser emulieren
• Optimieren Sie auf Basis aktueller Daten und vermeiden Sie Regressionen

„Möglicherweise müssen Sie Ihre Website überdenken. Sie müssen herausfinden, wer Ihre Website nutzt, welche Netzwerkbedingungen sie haben, welches typische Gerät sie verwenden usw.“

— Ivailo Hristov, @NitroPack

Fallstrick Nr. 3: Sie nutzen die RUM-Datentools nicht, um LCP-Engpässe zu lokalisieren

Während Labordaten für die Erkennung von Problemen vor der Produktion unerlässlich sind, bieten RUM-Daten eine ganzheitliche Sicht auf die Postproduktionserfahrungen des echten Benutzers.

Real User Monitoring (RUM) -Tools bieten Einblicke in die Art und Weise, wie tatsächliche Benutzer Ihre Website in realen Szenarien erleben. Diese Tools verfolgen und analysieren die Leistung von Webseiten, wie sie echte Benutzer im Hinblick auf unterschiedliche Gerätefunktionen, Netzwerkverbindungen und Interaktionen erleben.

Bei der Auswahl eines RUM-Datentools ist die Datengranularität von entscheidender Bedeutung. Der CrUX-Datenbericht ist eine großartige öffentliche Informationsquelle, kann jedoch aufgrund seiner Beschaffenheit und Datenschutzanforderungen keine tiefere Datenebene als sein derzeitiges Setup bereitstellen.

Abgesehen davon, dass Sie sich auf Ihre interne Telemetrie und Datenerfassung verlassen, können Sie auch andere Tools (sowohl kostenpflichtige als auch kostenlose) in Betracht ziehen:

• New Relic Browser :Bietet Einblicke in die Endbenutzererfahrungen und überwacht JavaScript-Fehler. Es bietet detaillierte Leistungszeitpläne und hilft bei der Identifizierung von Engpässen.
• Dynatrace:Bietet End-to-End-Überwachung, vom Frontend bis zum Backend. Es erkennt automatisch Leistungsprobleme im gesamten Stapel.
• AppDynamics:Erfasst vollständige Leistungsdaten in Echtzeit und ermöglicht Unternehmen die Visualisierung komplexer Anwendungsumgebungen.
• Pingdom:Obwohl es für seine Verfügbarkeitsüberwachung bekannt ist, bietet es auch RUM-Funktionen, um Einblicke in Benutzererlebnisse von mehreren globalen Standorten aus zu erhalten.
• Boomerang:Ein Open-Source-RUM-Tool, das die Seitenladezeit echter Benutzer misst. Es kann Metriken für harte und weiche Seitenladevorgänge und sogar für Single-Page-Apps erfassen.
• Perfume.js:Eine kleine Web-Performance-Bibliothek, die Entwicklern hilft, die Leistung ihrer Webseiten in Echtzeit zu messen.

Zusammenfassend lässt sich sagen, dass Sie für eine 360-Grad-Ansicht der Leistung am besten Labordaten für die Optimierung vor der Produktion und RUM-Daten für Erkenntnisse nach der Produktion verwenden.

Falle Nr. 4: Sie verfolgen nicht die Leistung von Drittanbieterlösungen

Es ist kein Geheimnis, dass wir für eine Vielzahl von Funktionen auf Lösungen von Drittanbietern angewiesen sind, darunter Analysen, Anzeigen, Widgets, Chat-Systeme, Social-Media-Integration und mehr.

Diese externen Skripte und Ressourcen bieten zwar wesentliche Funktionen oder Monetarisierungsmöglichkeiten, können sich jedoch auch negativ auf Ihren LCP-Score auswirken und ihn insbesondere schädigen durch:

• Unerwartete Ausfallzeiten, Verzögerungen und ineffiziente Codeaktualisierungen außerhalb Ihrer Domain
• Übermäßige Netzwerkanforderungen , die zu längeren Ladezeiten führen, insbesondere wenn diese nicht asynchron geladen oder verzögert werden
• Rendering-blockierende Ressourcen , die den Rendering-Prozess Ihrer Website stoppen und zu höheren Exit-Raten beitragen

„Sie (Websitebesitzer) sind stark von diesen Diensten abhängig und müssen sicherstellen, dass Sie deren Leistung verfolgen. Wenn etwas nicht gut funktioniert, sollten Sie Alarm schlagen.“

— Ivailo Hristov, @NitroPack

Wenn die von Ihnen verwendeten Lösungen von Drittanbietern nicht Ihren Leistungsstandards entsprechen, sollten Sie erwägen, sie aus Ihrem Tech-Stack auszuschließen oder sich an die Entwickler zu wenden und auf schnelle Verbesserungen zu drängen.

So reparieren Sie den größten Contentful Paint (Stufen und Expertentechniken)

Angesichts der Komplexität von LCP wäre es kontraproduktiv, einfach einzelne Optimierungstechniken aufzulisten.

Stattdessen zerlegen wir den LCP-Wert in vier Unterteile, zwischen denen es keine Überschneidungen oder Lücken gibt, und addieren sie zusammen zur vollständigen LCP-Zeit:

1. Zeit bis zum ersten Byte (TTFB)
2. Verzögerung der Ressourcenauslastung
3. Ladezeit der Ressource
4. Element-Rendering-Verzögerung

#1: Reduzieren Sie die Zeit bis zum ersten Byte (TTFB)

Betrachten Sie TTFB als Ihre Basislinie für einen guten LCP-Score – wenn TTFB beispielsweise 1 s beträgt, kann Ihr LCP nicht unter 1 s fallen, egal wie stark Sie ihn optimieren.

Ein niedrigerer TTFB erfordert einige wesentliche Voraussetzungen, die ein leistungsstarkes Ökosystem für Ihre Website gewährleisten, wie zum Beispiel:

• Auswahl eines guten Hosting-Anbieters
• Weiterleitungen vermeiden
• Caching Ihrer Website
• Verwendung eines Content Delivery Network (CDN)

#2: Beseitigen Sie Verzögerungen bei der Ressourcenauslastung

Idealerweise soll Ihr LCP-Element gleichzeitig mit dem Laden der ersten von der Webseite geladenen Ressource beginnen.

Um dies zu erreichen, sollten Sie Priorisierungstechniken verwenden, die dem Browser mitteilen, wann genau das LCP-Element abgerufen werden soll:

• link rel="preload" Bilder und Schriftarten (abhängig von Ihrem Fall)
• Entfernen Sie Ihr LCP-Element aus allen Lazy Loading-Elementen, die Sie für die Webseite aktiviert haben

#3: Beseitigen Sie Verzögerungen bei der Ressourcenauslastung

Um die LCP-Zeit zu verkürzen, ist es wichtig, die Zeit zu verkürzen, die für die Bereitstellung Ihrer Ressourcen an den Browser benötigt wird. Hier hilft eine Kombination mehrerer bekannter Techniken:

• Bilder komprimieren und anpassen
• Nutzen Sie moderne Bildformate wie WebP
• Reduzieren Sie die Dateigröße Ihrer Schriftarten
• Versuchen Sie im Allgemeinen, Videos im LCP-Bereich (d. h. über dem Falz) zu vermeiden.

#4: Eliminieren Sie die Verzögerung beim Rendern von Elementen

Um Ihren LCP-Score effektiv zu senken, ist es unbedingt erforderlich, dass das LCP-Element sofort nach Abschluss des Ladevorgangs gerendert wird.

Um sicherzustellen, dass keine anderen Elemente das Rendern blockieren oder verzögern, können Sie:

• Generieren Sie kritisches CSS
• Verschieben Sie JavaScript, das das Rendern blockiert, oder eliminieren Sie es vollständig
• Legen Sie die Eigenschaft „font-display“ fest, um den Browser anzuweisen, eine Systemschriftart zu verwenden, bis die benutzerdefinierte Schriftart bereit ist, und sie dann nach dem Laden auszutauschen

Größte Contentful-Paint-Optimierungen: Vorher-Nachher-Beispiel

Mit einer Demo-Website und einer Laborumgebung begannen wir mit einem LCP-Score von 13 s und konnten ihn nach Anwendung aller oben besprochenen Optimierungen auf 1,9 s senken.

Als Referenz: Ein LCP-Score unter 2,5 s gilt als „Gut“ und wird in Ihrer Core Web Vitals-Bewertung als „Bestanden“ angezeigt.

Vor LCP-Optimierung:13 s LCP-Wert

Nach LCP-Optimierung:1,9 s LCP-Wert

Größte FAQ zu Contentful Paint mit Google und NitroPack

Wenn Sie mehrere Bilder mit exakt derselben Größe haben, welches ist dann der LCP?

Largest Contentful Paint berücksichtigt ein ganzes Element für den Hauptkandidaten. Wenn sich die Bilder im selben Container befinden, werden alle Bilder als der größte Inhalt betrachtet. Wenn nicht, wird normalerweise das Bild, das zuerst erscheint (weiter oben auf der Seite), als LCP betrachtet.

Wenn ich unterschiedliche LCP-Bilder auf Mobilgeräten und Desktops habe, wofür sollte ich optimieren?

Es ist wichtig, für beides zu optimieren, aber konzentrieren Sie sich auf die Plattform, von der die meisten Ihrer Benutzer kommen. Wenn mehr Nutzer Ihre Website über Mobilgeräte besuchen, priorisieren Sie die mobile Optimierung. Überprüfen Sie immer die Analysen Ihrer Website, um Ihre Entscheidung zu treffen.

Ist ein CDN wirklich erforderlich, wenn Ihre Website lokal und nicht global ist?

Wenn die Ressourcen Ihrer Website nicht mehr als ein paar hundert Kilometer durch ein Land transportieren müssen, könnte ein CDN als optional angesehen werden. Ein wesentliches Detail besteht jedoch darin, dass durch den Verzicht auf einen CDN-Dienst der gesamte eingehende Datenverkehr an Ihren Ursprungsserver geleitet wird, was in der Regel zu allgemein schlechter Leistung oder in einigen extremen Fällen sogar zu Serverausfällen führt. Abschließend sollten Sie erwägen, das mit Ihrem Hosting gelieferte CDN als kostengünstige Option zu aktivieren.

Beeinflusst der Besuch einer Website über eine Anzeige die LCP-Zeit?

Bei der Verwendung verkürzter Links (typisch für bezahlte Kampagnen) wartet der Benutzer normalerweise darauf, dass mindestens eine Weiterleitung erfolgt, bevor er auf Ihrer Seite landet. Dies alles wird auf Ihren LCP-Score angerechnet. Auch wenn dies außerhalb Ihrer Kontrolle liegt, können Sie sicherstellen, dass die Zielseite einfach und gut optimiert ist, um den Benutzer so schnell wie möglich anzusprechen.

Was passiert, wenn ich viel Verkehr aus langsameren Ländern bekomme?

Wenn Sie erheblichen Datenverkehr aus Regionen mit langsameren Internetverbindungen haben, ist die Implementierung von Leistungsoptimierungen wie Content Delivery Networks (CDNs) unerlässlich, um Ihre Inhalte schneller in diesen Gebieten bereitzustellen. Erwägen Sie außerdem, Ihr UX- und Webdesign zu vereinfachen, um besser auf Ihre Kernzielgruppe einzugehen.

Hat die Verwendung großer Schriftarten Auswirkungen auf LCP?

Je größer die Web-Font-Dateien sind, desto mehr Anfragen stellt Ihre Website, wenn Benutzer versuchen, sie zu laden. Um die Arbeit zu beschleunigen und die LCP-Zeit zu verkürzen, verwenden Sie Techniken zum Laden von Schriftarten, z. B. Unterteilung von Schriftarten, Vorladen von „above-the-fold“-Stilen und Verwendung der Eigenschaft „font-display“.

Was sind die besten Möglichkeiten zur Optimierung für LCP mit Hintergrundbildern in voller Größe auf Mobilgeräten?

Normalerweise wird ein Hintergrundbild in voller Größe nicht als LCP-Kandidat betrachtet (ab dem Chrome 88-Update). Vorausgesetzt, Sie haben bereits festgestellt, dass es sich bei dem Hintergrundbild tatsächlich um Ihr LCP-Element auf Mobilgeräten handelt, können Sie Folgendes tun:

• Komprimieren Sie das Bild und verwenden Sie das WebP-Format
• Laden Sie es vor, um dem Browser mitzuteilen, dass er es beim Ladevorgang priorisieren soll
• Verwenden Sie CSS-Eigenschaften wie „background-size: cover“, um sicherzustellen, dass das Bild richtig skaliert wird
• Verwenden Sie die adaptive Bildgröße, um das Bild automatisch an das Ansichtsfenster des Benutzers anzupassen