Optimierung der LCP-Metrik
Radek ŠírAktualisiert 7.2.20268 Minuten LesenLassen Sie uns gemeinsam die Herausforderungen der Largest Contentful Paint (LCP)-Metrik erkunden und lernen, wie man diese am effektivsten optimiert.
Wir haben einige Tipps zur Optimierung der LCP-Metrik vorbereitet. Diese basieren auf unserer Geschwindigkeitsberatung. Hier zeigen wir Ihnen beispielsweise die Nutzung von Technologien wie Priority Hints, Preload oder nativem Lazy Loading.
Wenn Sie mehr erfahren möchten, lesen Sie weiter oder sehen Sie sich die Aufzeichnung unseres Webinars an:
YouTube: Optimierung der LCP-Geschwindigkeitsmetrik in der Praxis
Bevor Sie beginnen, werfen Sie auch einen Blick darauf, wie Sie das LCP-Element korrekt identifizieren. Dies ist entscheidend für weitere Optimierungen.
Priority Hints (Priorität direkt beim Element erhöhen)
Wenn das LCP-Element ein Bild ist, können Sie dessen Download-Priorität mithilfe von Priority Hints ändern. Sie erhöhen die Priorität, indem Sie dem <img>-Tag das Attribut fetchpriority="high" hinzufügen. Dieses Attribut sorgt dafür, dass die Bildquelle mit der höchsten Priorität heruntergeladen wird, was die schnellste Darstellung dieses Elements gewährleistet.
Für andere Bilder auf der Seite fügen Sie dem <img>-Tag die Attribute loading="lazy" hinzu. Damit teilen Sie dem Webbrowser mit, dass dieser die Quelle erst dann herunterladen und rendern soll, wenn der Benutzer dorthin scrollt.
Vergessen Sie nicht die Bilder aus Bereichen, die über WYSIWYG bearbeitet werden und von Website-Redakteuren eingefügt werden.
Denken Sie auch an Karussells und ähnliche Komponenten mit mehreren Bildern. Wenn das Karussell auf der Seite ein LCP-Element ist, fügen Sie dem ersten Bild das Attribut fetchpriority="high" hinzu und allen anderen Bildern das Attribut loading="lazy".
<ul class="carousel">
<!-- Erstes Bild des Karussells, dessen Ladepriorität erhöht wird: -->
<li><img src="bild1.webp" fetchpriority="high" alt="" /></li>
<!-- Weitere Bilder des Karussells, mit niedriger Ladepriorität: -->
<li><img src="bild2.webp" loading="lazy" alt="" /></li>
<li><img src="bild3.webp" loading="lazy" alt="" /></li>
</ul>
Unterstützung ist bereits sehr weitreichend. Das Attribut fetchpriority funktioniert in allen modernen Browsern außer Firefox. Weitere Informationen finden Sie auf web.dev.
Preload (Priorität in der Dokumentenüberschrift erhöhen)
Ähnlich wie Priority Hints funktioniert das <preload>-Tag. Mit dem <preload>-Tag können Sie dem Browser mitteilen, dass er die Quelle so früh wie möglich herunterladen soll. Preload ist nützlich, um Dateien mit Webfonts vorab zu laden, die für das erste Rendern des sichtbaren Bereichs der Seite wichtig sind:
<link rel="preload" href="/font400.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="/font500.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="/font600.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
Mit <preload> können Webfonts, JavaScript-Dateien oder Bilder vorgeladen werden.
Der Vorteil des <preload>-Tags liegt in seiner Funktionalität in allen Browsern.
Wenn Sie Preload für Bilder mit Srcset verwenden möchten, müssen Sie die Quellen in der genauen Reihenfolge für alle Breiten und alle Quellbilder definieren. In dieser Hinsicht ist die Verwendung des Attributs fetchpriority="high", das Sie direkt zum <img>-Tag hinzufügen, wesentlich einfacher, und der Browser entscheidet für Sie, welche Quelle vorrangig heruntergeladen wird.
Ein weiterer Nachteil ist, dass <preload> so hoch wie möglich im <head>-Bereich platziert werden muss. Setzen Sie Preload für Schriftarten gleich zu Beginn des <head>, vor dem <link>, das den Pfad zu den CSS-Dateien mit den Stilen deklariert.
Weitere Informationen zur korrekten Vorbereitung von <preload> finden Sie auf MDN.
Natives Lazy Loading
Die Nutzung von nativem „Lazy Loading“ ist heute Standard, da es über vollständige Unterstützung in allen modernen Browsern verfügt. Verwenden Sie Lazy Loading für alle <iframe>- und <img>-Elemente, die sich nicht im ersten Viewport befinden. Dies stellt sicher, dass der Browser das Laden dieser Elemente effizient steuern kann.
Beim Einsatz von JavaScript Lazy Loading, bei dem <img>-Tags kein src-Attribut haben, kennt der Browser die Quelldateien nicht.
<img src="bild1.webp" loading="lazy" alt="" />
Bilder im WebP-Format
Bereiten Sie Bilder im modernen WebP-Format vor und verwenden Sie sie in allen Bereichen Ihrer Website, einschließlich der Illustrationsbilder. Dieses Format ermöglicht eine erhebliche Platzersparnis im Vergleich zu JPG- oder PNG-Formaten, bewahrt die Qualität und verbessert die Ladegeschwindigkeit der Seiten.
Vergessen Sie nicht, Bilder zu optimieren, die aus WYSIWYG-Teilen stammen und von Web-Editoren vorbereitet werden.
Passen Sie die Kompression der Illustrationsbilder manuell an, beispielsweise mit dem Tool Squoosh.
Das Squoosh-Tool ermöglicht es Ihnen, mit verschiedenen Kompressionsvarianten zu experimentieren.
Tipp: Zum Zeitpunkt der Veröffentlichung dieses Artikels stellt Google die Bibliothek Jpegli vor, die in der Lage ist, JPG-Bilder bis zu 35 % besser zu komprimieren als herkömmliche Bibliotheken und mit dem WebP-Format konkurrieren kann.
Optimieren Sie Webfonts
Überprüfen Sie vor dem Einsatz von Webfonts auf Ihrer Website deren Größe und ziehen Sie Subsetting in Betracht, um die endgültige Größe zu optimieren.
Wenn möglich, bevorzugen Sie stets die lokale Speicherung von Schriftarten auf Ihrem Server, was die Ladegeschwindigkeit der Seiten erheblich verbessern kann. Zum Generieren lokaler Dateien für Google Fonts können Sie beispielsweise den Google Font Helper verwenden.
Verwenden Sie immer das WOFF2-Format. Ein anderes Format ist nicht mehr erforderlich. WOFF2 wird in allen modernen Browsern breit unterstützt.
Überprüfen Sie vor dem Einsatz von Schriftdateien deren Inhalt, beispielsweise mit dem Tool Wakamai Fondue, um die Anzahl der Zeichen, Achsen und andere Informationen für eine optimale Auswahl und Konfiguration der Schriftarten auf Ihrer Website zu ermitteln.
Vor der Optimierung hat die Schriftdatei eine Größe von 51 kB. Quelle: Wakamai Fondue.
Nach der Optimierung hat die Schriftdatei eine Größe von 19 kB. Quelle: Wakamai Fondue.
Nach der Optimierung aller Schriftdateien wurden ca. 100 kB beim Datentransfer eingespart. Quelle: PageSpeed Monitoring.
JS-Dateien und Inline-Skripte
Platzieren Sie JavaScript-Dateien immer im Footer vor dem </body>-Tag oder im Header vor dem </head>-Tag auf Ihren Seiten. Idealerweise verwenden Sie das Attribut defer, das es ermöglicht, JS-Dateien erst nach Abschluss des HTML-Parsings durch den Browser zu verarbeiten.
<script src="app.js" defer></script>
Vermeiden Sie das Einfügen von „ad-hoc“-Skripten direkt in den Seitenquellcode. Beispielsweise sollte die Datei maps.google.com/maps/api/js, die zur Bedienung von Karten auf der Seite dient, nicht mitten im HTML-Dokument eingefügt werden. Ein falsch platzierter Skript kann das Rendern der gesamten Seite blockieren.
Richtige Kompression mit Brotli oder Gzip
Bei der Optimierung einer Website ist es wichtig, die Kompressionseinstellungen für Textdateien wie CSS, JS, SVG und ICO zu überprüfen. Stellen Sie sicher, dass auf dem Server die Kompression mit Gzip oder Brotli aktiviert ist.
- Bei Gzip-Kompression empfehlen wir, mindestens Stufe 7 einzustellen, idealerweise jedoch 9 - 10. Bei Brotli sollte die Kompressionsstufe 6 - 7 betragen.
- Durch die richtige Einstellung wird die Dateigröße effizient reduziert und die Ladegeschwindigkeit der Seiten für die Benutzer erhöht.
- Vergessen Sie nicht zu überprüfen, ob die Kompression auch für SVG-Dateien korrekt eingestellt ist, da dies oft übersehen wird.
- Andererseits sollte die Kompression für das Bildformat WebP nicht aktiviert werden, da diese Dateien bereits komprimiert sind und die Kompression deren Größe erhöhen könnte.
Zur Überprüfung der Kompressionseinstellungen können Sie das Tool Gzip and Brotli Compression Level Estimator verwenden.
Weitere Möglichkeiten zur Optimierung der LCP
- Nutzen Sie BF Cache für das sofortige Laden der Seite aus dem Browserverlauf.
- Fügen Sie Ihrer Website Speculation Rules hinzu, um das sofortige Laden der Seite durch Hintergrundrendering zu ermöglichen.
- Achten Sie darauf, dass Ihr LCP nicht in der Cookie-Leiste „versinkt“, die später geladen werden kann.
- Teilen Sie CSS in kleinere Dateien auf.
- Räumen Sie im
<head>auf Ihrer Website auf.
Und was gibt es abschließend zur Optimierung der LCP zu sagen?
Die Optimierung der LCP-Metrik ist entscheidend für die Erzielung schneller und benutzerfreundlicher Websites. Die korrekte Implementierung der im Artikel erwähnten Techniken kann Ihnen dabei helfen.
Das Monitoring von LCP und Geschwindigkeit im Allgemeinen auf täglicher Basis und die Analyse von neu implementiertem Code sind der Schlüssel zur Aufrechterhaltung einer hohen Website-Performance.
In unserem PLUS-Tester können Sie tägliches Monitoring nutzen. Für ausgewählte URLs überwachen und speichern wir CrUX-Daten von Google und führen synthetische Messungen mit Lighthouse durch.
Anzeige von CrUX-Daten von Google für die von uns überwachten URLs.
Mit der „Watchdog“-Funktion senden wir dann Berichte über Verschlechterungen der Performance-Metriken an Slack oder MS Teams.
Verschlechterung der LCP-Metrik in einem der automatisierten synthetischen Tests im Tool pagespeed.one.
Neben allgemeinen Empfehlungen haben wir heute im Domänenbericht auch detaillierte Daten aus CrUX API zur Verfügung. Sie sehen nicht nur, ob Ihr LCP durch ein Bild oder ein Textelement verursacht wird, sondern auch genau, welcher Teil des Bildladens die größte Verzögerung verursacht – Serverantwort, eigentlicher Download oder Rendering. Dadurch lässt sich die LCP-Optimierung viel gezielter anpacken und die Ergebnisse kommen schneller.
Das Thema der Optimierung der Core Web Vitals-Metriken behandeln wir umfassend, lesen Sie unsere weiteren Texte: