Langsamen Largest Contentful Paint beheben

Beheben Sie ein langsames LCP-Bild (Largest Contentful Paint) in 4 Schritten: Ändern Sie die Größe auf die Anzeige-Größe, konvertieren Sie es in WebP oder AVIF, laden Sie es vor (Preload) und setzen Sie fetchpriority auf high. Die ersten beiden Schritte bringen die größte Verbesserung und erfordern keine Änderungen am Markup Ihrer Seite.

Auf den meisten Seiten ist das Largest Contentful Paint-Element ein einzelnes Hero-Bild. Das bedeutet, dass der LCP eigentlich eine Frage einer einzelnen Datei ist und nicht Ihrer gesamten Website. Die Optimierung dieser einen Datei verbessert den Messwert in der Regel deutlicher als jede andere verfügbare Optimierung.

Was der LCP misst

Der LCP erfasst, wie lange das Rendern des größten sichtbaren Elements dauert, gemessen ab dem Start des Ladevorgangs der Seite. Google bewertet 2,5 Sekunden oder weniger als gut, 2,5 bis 4 Sekunden als verbesserungswürdig und über 4 Sekunden als schlecht.

Das gemessene Element ist meist ein Bild, gelegentlich ein Überschriftstext, und es ist immer etwas, das ohne Scrollen sichtbar ist. Das Element kann sich je nach Gerät ändern, da ein Hero-Bild, das das Desktop-Layout dominiert, auf einem Smartphone unter dem sichtbaren Bereich (below the fold) liegen kann.

Das verantwortliche Element finden

Führen Sie Lighthouse aus und lesen Sie den Eintrag für das Largest Contentful Paint-Element, der das genaue gemessene Element nennt. Raten ist Zeitverschwendung, da das Element häufig nicht dasjenige ist, das man vermutet.

Prüfen Sie sowohl die Mobil- als auch die Desktop-Version, da sich die Layouts und damit auch die Ergebnisse unterscheiden. Felddaten von echten Besuchern sind zuverlässiger als ein einzelner Labortest, da die Netzwerkbedingungen in der Realität weitaus stärker variieren als unter Testbedingungen. Wenn die beiden Werte voneinander abweichen, vertrauen Sie den Felddaten und nutzen Sie den Labortest zur Diagnose.

Das Bild optimieren – in der Reihenfolge der Wirkung

Um den LCP eines Bildes zu verbessern, gehen Sie diese 6 Schritte der Reihe nach durch.

1. Ändern Sie die Bildgröße auf die maximal benötigte Anzeigegröße, verdoppelt für Bildschirme mit hoher Pixeldichte.
2. Konvertieren Sie es in WebP, oder in AVIF, wenn es sich um ein großes Foto handelt.
3. Komprimieren Sie ein Hero-Bild auf eine Zielgröße von unter 200 KB, was bei den meisten Designs selbst in voller Breite machbar ist.
4. Fügen Sie die Attribute width und height hinzu, damit der Browser den Platz reserviert und keine Layout-Verschiebungen entstehen.
5. Laden Sie das Bild im Page-Head vor (Preload), damit der Browser sofort mit dem Abruf beginnt.
6. Setzen Sie fetchpriority auf high beim img-Element, um dem Browser mitzuteilen, dass diese Datei oberste Priorität hat.

Die Schritte 1 und 2 bringen in der Regel den größten Teil der Verbesserung, und sie sind die beiden einzigen, bei denen Sie das Markup der Seite überhaupt nicht anfassen müssen.

Warum Größenänderung besser ist als reine Komprimierung

Die Abmessungen bestimmen den größten Teil der Dateigröße. Eine Größenänderung spart daher mehr Gewicht als jede Qualitätseinstellung. Ein Foto mit 4000 Pixeln Breite, das mit 1200 Pixeln angezeigt wird, enthält 11-mal mehr Pixeldaten, als die Seite überhaupt darstellen kann.

Die dritte Zeile zeigt, warum die Größenänderung an erster Stelle steht. Die Größenänderung allein war besser als die reine Komprimierung, und die Kombination übertraf beide. Die Zahlen variieren je nach Bild und Verbindung, aber die Reihenfolge bleibt stets dieselbe.

Preload und fetchpriority

Das Vorladen (Preloading) weist den Browser an, das Hero-Bild abzurufen, noch bevor er das Parsen der Seite abgeschlossen hat, was in der Regel 200 bis 500 Millisekunden spart. Diese Einstellung ist wichtig, da Browser Bilder erst spät im Parsing-Prozess entdecken.

Laden Sie nur ein einziges Bild vor. Das Vorladen mehrerer Bilder hebt den Vorteil auf, da der Browser seine Aufmerksamkeit dann genau wie sonst auch aufteilt. Das Setzen von fetchpriority auf high erzielt ein ähnliches Ergebnis mit weniger Markup und reicht bei einem Bild, das bereits im initialen HTML vorhanden ist, oft schon aus.

Fehler, die den LCP verschlechtern

• Lazy Loading für das Hero-Bild verwenden. Lazy Loading verzögert genau die Datei, die Sie zuerst benötigen. Verwenden Sie es nur unterhalb des sichtbaren Bereichs.
• Das Hero-Bild über JavaScript laden. Ein per Skript eingefügtes Bild kann erst heruntergeladen werden, wenn das Skript ausgeführt wird.
• Ein CSS-Hintergrundbild verwenden. Hintergrundbilder werden später als img-Elemente entdeckt und lassen sich nicht so leicht priorisieren.
• Mehrere Bilder vorladen. Konkurrierende Prioritäten heben den Vorteil komplett auf.
• Fehlende Angaben für width und height. Layout-Verschiebungen verschlechtern einen anderen Messwert, während sich dieser hier verbessert.

Wenn das LCP-Element Text ist

Ein textbasierter LCP wird meist durch Webfonts verzögert und nicht durch den Text selbst. Der Browser hat die Wörter sofort vorliegen, wartet aber mit der Darstellung auf die Schriftdatei.

Setzen Sie font-display auf swap, damit der Text in einer Ersatzschriftart gerendert und ausgetauscht wird, sobald der Webfont geladen ist. Laden Sie die wichtigste Schriftdatei vor und reduzieren Sie die Schriftart auf die Zeichen, die Ihre Seiten tatsächlich verwenden (Subsetting). Dies verringert eine Schriftart oft von 200 KB auf unter 30 KB. Das Bereitstellen von Schriften über die eigene Domain spart zudem eine zusätzliche Verbindung zu einem Drittanbieter.

Die Server-Antwortzeit setzt das Limit

Der LCP kann nicht schneller sein als die Zeit, die Ihr Server benötigt, um das erste Byte zurückzugeben. Ein langsamer Server bremst also jede andere Optimierung aus. Streben Sie weniger als 600 Millisekunden bis zum ersten Byte an.

Prüfen Sie diesen Wert, bevor Sie Bilder optimieren. Denn eine Server-Antwortzeit von 2 Sekunden macht ein LCP-Ziel von 2,5 Sekunden unmöglich, egal was Sie mit den Dateien tun. Caching, ein schnellerer Hoster oder ein Content Delivery Network (CDN) lösen dieses Problem. Die Bildoptimierung verbessert dann das, was übrig bleibt, anstatt gegen ein an anderer Stelle gesetztes Limit anzukämpfen.

Auch Drittanbieter-Skripte verzögern das Bild

Webanalyse, Cookie-Banner, Chat-Widgets und Werbeskripte konkurrieren mit Ihrem Hero-Bild um Bandbreite und Rechenzeit. Ein perfekt optimiertes Bild wird immer noch spät gerendert, wenn 12 Skripte davor geladen werden.

Cookie-Banner sind am schädlichsten, da viele das Rendern blockieren, bis der Besucher eine Auswahl trifft. Laden Sie Drittanbieter-Skripte mit dem Attribut defer oder async, damit sie die Seite nicht blockieren, und prüfen Sie, wie viele wirklich benötigt werden. Das Entfernen von 3 ungenutzten Tracking-Skripten verbessert den LCP oft mehr als eine weitere Runde Bildkomprimierung.

Die Änderung richtig testen

Testen Sie in einem privaten Fenster mit deaktivierten Erweiterungen und führen Sie die Messung dreimal durch, anstatt sich auf ein einzelnes Ergebnis zu verlassen. Die Werte variieren zwischen den Durchläufen spürbar.

Überprüfen Sie, ob der Browser tatsächlich die kleinere Datei erhalten hat. Öffnen Sie die Entwicklertools, wechseln Sie zum Reiter Netzwerk, filtern Sie nach Bildern und laden Sie die Seite neu. Die übertragene Größe und das Format erscheinen in der Liste. Wenn die Seite immer noch die alte Datei ausgibt, liegt das meist an einem Cache, der die vorherige Version vorhält, und nicht an einer fehlgeschlagenen Optimierung.

Den LCP auch nach der Optimierung schnell halten

Stellen Sie eine Regel für Hero-Bilder auf, anstatt sie einzeln zu korrigieren, da neue Seiten das Problem sonst wieder einführen. Eine einmal optimierte Website wird innerhalb weniger Monate wieder langsamer, wenn Redakteure Bilder direkt aus der Kamera hochladen.

Vereinbaren Sie eine maximale Breite und eine maximale Dateigröße für Hero-Bilder, schreiben Sie diese auf und wenden Sie sie auf jede neue Seite an. Eine Regel wie „1920 Pixel breit und unter 200 KB“ ist leicht zu überprüfen und deckt fast jedes Design ab. Wenn mehrere Personen Inhalte veröffentlichen, ist die schriftliche Regel wichtiger als die Technik, da der Messwert die schlechteste Seite widerspiegelt, nicht die beste.

Hero-Bilder in einem Rutsch vorbereiten

Verarbeiten Sie alle Hero-Bilder der Website zusammen, da sie dieselben Spezifikationen und dieselbe Zielgröße teilen. Die meisten Websites haben zwischen 10 und 100 davon auf Landingpages, Kategorieseiten und in Artikeln.

Legen Sie die Breite und das KB-Ziel einmal fest, ziehen Sie die Bilder hinein, und jede Datei wird passend ausgegeben. Bis zu 500 Bilder können pro Durchgang verarbeitet werden – komplett in Ihrem Browser auf Ihrem eigenen Prozessor. Es wird nichts hochgeladen, sodass Staging-Assets, unveröffentlichte Kampagnenseiten und Kundenarbeiten auf Ihrem Rechner bleiben, während die gesamte Bibliothek vorbereitet wird.