LCP misst die Zeit, bis der Hauptinhalt geladen ist. Der Hauptinhalt ist der größte Textblock oder das größte Bild der Seite. Auf den meisten Seiten ist der LCP die entscheidende Kennzahl, denn er bestimmt, wann die Seite für den Nutzer brauchbar wird.
Ein Nutzer kommt auf die Seite. Die Seite beginnt zu laden. Der Browser lädt das HTML. Dann das CSS. Dann das JavaScript. Das HTML wird dargestellt. Das CSS legt die Stile fest. Das JavaScript läuft. Der Hauptinhalt erscheint. Dieser Moment ist der LCP.
Ein LCP von einer Sekunde ist hervorragend. Der Nutzer sieht den Inhalt schnell. Ein LCP von drei Sekunden ist langsam. Der Nutzer wartet. Ein LCP von fünf Sekunden ist sehr langsam. Der Nutzer geht.
Was als Largest Contentful Paint zählt
Es zählt das größte Element im sichtbaren Bereich der Seite, meist ein Bild oder eine Überschrift. Beispiel: eine Startseite mit Hero-Bild. Das Hero-Bild ist das größte Element. Der Zeitpunkt, an dem es erscheint, ist der LCP.
Beispiel: ein Blogartikel mit Überschrift. Die Überschrift ist das größte Element. Der Zeitpunkt, an dem sie erscheint, ist der LCP.
Beispiel: eine Produktseite mit Produktbild. Das Produktbild ist das größte Element. Der Zeitpunkt, an dem es erscheint, ist der LCP.
Der LCP wird ab dem Klick auf den Link gemessen (Start des Seitenaufbaus), bis das größte Element erscheint. Darin stecken die Zeit für den Download von HTML, CSS und JavaScript, der Download des Bildes und der Seitenaufbau.
LCP optimieren
Optimierungsziel: ein LCP unter 2,5 Sekunden.
Strategie eins: Verkürze die Serverantwortzeit (TTFB). Ein schnellerer Server liefert das HTML schneller aus. Ohne HTML kann nichts dargestellt werden. Du senkst die TTFB, indem du den Server verbesserst, ein CDN nutzt und Datenbankabfragen reduzierst.
Strategie zwei: Verkleinere die CSS-Datei. Kleineres CSS lädt schneller. Das CSS muss geladen sein, bevor die Seite dargestellt wird. Entferne ungenutzte Stile, minifiziere die Datei und lade nicht kritisches CSS später.
Strategie drei: Verkleinere die JavaScript-Datei. Großes JavaScript verzögert Ausführung und Darstellung. Entferne ungenutzten Code, teile große Dateien auf und lade nicht kritisches JavaScript später.
Strategie vier: Optimiere Bilder. Bilder sind oft die größten Elemente (LCP). Verkleinere die Dateigröße durch Komprimierung, nutze moderne Formate (WebP) und reduziere die Bildmaße.
Strategie fünf: Lade kritische Ressourcen vor (Preload). Sag dem Browser, dass er das wichtige Bild oder die wichtige Schrift früh laden soll. Das Bild lädt dann parallel zu HTML und CSS. Das senkt den LCP.
Ein Praxisbeispiel: LCP eines Blogartikels optimieren
Ausgangs-LCP: 2,8 Sekunden.
Analyse: Das Hero-Bild des Artikels ist das größte Element. Das Bild ist zwei Megabyte groß. Der Download dauert 1,2 Sekunden. Der Bilddownload ist der Engpass.
Optimierung
Bild komprimieren: von zwei Megabyte auf 0,5 Megabyte. Die Downloadzeit liegt jetzt bei 0,3 Sekunden.
In das WebP-Format umwandeln: weiter auf 0,3 Megabyte. Die Downloadzeit liegt jetzt bei 0,1 Sekunden.
Bild vorladen: Der Browser lädt das Bild früh herunter, parallel zum HTML. Das spart 0,2 Sekunden.
Kritisches CSS in den sichtbaren Bereich legen: Die Seite kann früher dargestellt werden. Das spart 0,3 Sekunden.
Neuer LCP: 1,7 Sekunden.
2,8 minus 1,2 (Bilddownload) plus 0,1 (Download des komprimierten Bildes) ergibt 1,7 Sekunden. Das liegt unter dem Ziel von 2,5.
LCP und verschiedene Seitentypen
Startseite
Meist ist das Hero-Bild der LCP. Optimiere es, indem du das Bild komprimierst, ein CDN nutzt und vorlädst.
Blogartikel
Die Überschrift oder das erste Bild ist der LCP. Optimiere, indem du Verzögerungen durch CSS und JavaScript reduzierst und Schriften vorlädst.
Produktseite
Das Produktbild ist der LCP. Optimiere, indem du das Bild komprimierst und responsive Bilder für verschiedene Geräte einsetzt.
Kassenseite
Das Formular oder eine Schaltfläche ist der LCP. Optimiere, indem du CSS und JavaScript verkleinerst und kritische Ressourcen vorlädst.
Jeder Seitentyp braucht eine andere Strategie. Finde heraus, welches Element dein LCP-Element ist. Und optimiere genau dieses Element.
LCP auf Mobilgeräten und am Desktop
Der mobile LCP ist meist langsamer als der LCP am Desktop. Das Mobilfunknetz ist langsamer. Mobilgeräte haben weniger Rechenleistung.
Ausgangs-LCP am Desktop: 1,5 Sekunden. Ausgangs-LCP mobil: drei Sekunden.
Mobil ist doppelt so langsam. Mobile Nutzer spüren die Langsamkeit stärker.
Optimiere zuerst für Mobilgeräte. Verkleinere die Bilder (mobile Bandbreite ist begrenzt). Reduziere JavaScript (Mobilgeräte verarbeiten es langsamer). Nutze mobilfreundliche Formate.
Die Verbesserung des LCP messen
Ausgangs-LCP
Miss vor der Optimierung.
Optimierung umsetzen
Neuer LCP
Miss nach der Optimierung.
Verbesserung
Ausgangs-LCP minus neuer LCP.
Beispiel
Ausgangswert 2,8 Sekunden. Nach der Optimierung 1,7 Sekunden. Die Verbesserung beträgt 1,1 Sekunden.
Wirkung berechnen
Eine Verbesserung um 1,1 Sekunden kann die Conversion-Rate um ein Prozent steigern (je nach Ausgangslage und Branche). Bei 50.000 Besuchern im Monat sind das 500 zusätzliche Conversions. Bei einem Bestellwert von 100 Dollar sind das 50.000 Dollar im Monat. 600.000 Dollar im Jahr.
Vergleiche das mit den Kosten der Optimierung. Kostet sie 50.000 Dollar, hast du das Geld nach einem Monat wieder drin. Ein hervorragender ROI.
Häufig gestellte Fragen
Woran erkenne ich, welches Element mein LCP ist?
Nutze die Entwicklertools deines Browsers. Klicke mit der rechten Maustaste auf die Seite und wähle „Untersuchen“. Öffne den Tab „Performance“ und zeichne das Laden der Seite auf. Die DevTools zeigen dir das LCP-Element. Oder nutze ein Tool für Seitengeschwindigkeit: Labortools nennen die LCP-Elemente. Auch der Bericht zu den Core Web Vitals in der Search Console zeigt LCP-Elemente auf deinen Seiten. Mit dem Website-Builder von WEMASY kannst du das direkt auf deiner Website einrichten.
Soll ich den LCP für alle Seiten optimieren oder nur für die Startseite?
Optimiere alle Seiten, aber setze Prioritäten nach dem Traffic. Die Startseite ist wichtig. Genauso wichtig sind Produktseiten (im Onlineshop) oder Artikelseiten (bei Publishern). Miss den LCP auf allen wichtigen Seiten. Optimiere zuerst die Seiten mit dem meisten Traffic.
Hilft Preloading immer beim LCP?
Nicht immer. Preloading verbraucht Bandbreite. Lädst du eine unwichtige Ressource vor, fehlt die Bandbreite für eine wichtige. Lade nur kritische Ressourcen vor (Hero-Bild, wichtige Schrift). Nicht kritische Ressourcen lädst du nicht vor.
Wie optimiere ich den LCP, wenn der Hauptinhalt dynamisch ist (per API geladen)?
Die Wartezeit des API-Aufrufs zählt zum LCP. Verkürze die API-Antwortzeit, indem du die Datenbank optimierst, Antworten zwischenspeicherst und ein CDN nutzt. Zeige außerdem einen Skeleton-Screen oder Platzhalterinhalt, während die API lädt. Der Platzhalter erscheint sofort. Der Nutzer empfindet die Seite als geladen. Der echte Inhalt füllt sich später ein. Der gefühlte LCP ist dann schneller als der echte.
Soll ich Lazy Loading für das LCP-Element nutzen?
Nein. Lazy Loading verzögert ein Bild, bis es gleich in den sichtbaren Bereich kommt. Liegt das Bild bereits im sichtbaren Bereich (LCP-Element), verzögert Lazy Loading es unnötig. Nutze Lazy Loading nur für Bilder unterhalb des sichtbaren Bereichs. Das LCP-Element lädst du sofort.
Wie unterscheidet sich der LCP vom FCP (First Contentful Paint)?
Der FCP zeigt, wann irgendein Inhalt erscheint (das kann ein kleiner Text sein). Der LCP zeigt, wann der Hauptinhalt erscheint (meist ein größeres Bild oder eine Überschrift). Der FCP kommt früher als der LCP. Der LCP ist für das Nutzererlebnis wichtiger. Verbessere zuerst den LCP.