Largest Contentful Paint verbessern: die häufigsten Ursachen
Largest Contentful Paint misst, wann das größte sichtbare Element im ersten Bildausschnitt geladen ist. Gut sind bis 2,5 Sekunden. Bei Betriebswebsites liegt die Ursache für schlechte Werte fast immer bei einem zu großen Titelbild, einer nachgeladenen Schrift oder einem blockierenden Skript.
- „largest contentful paint" wird rund 210 Mal im Monat gesucht, bei einem sehr niedrigen Wettbewerbsindex von 7 (eigene Auswertung über DataForSEO, August 2026).
- Gemessen wird das größte Element im sichtbaren Bereich, meist ein Bild oder eine große Überschrift.
- Schwellen: bis 2,5 Sekunden gut, bis 4,0 verbesserungswürdig, darüber schlecht.
- Bewertet werden echte Nutzerdaten über 28 Tage, nicht der Wert aus einem Testlauf.
- Drei Ursachen decken den Großteil ab: Bildgröße, Schriften von fremden Servern, blockierende Skripte.
- Das LCP-Element darf niemals verzögert geladen werden, der häufigste selbst verursachte Fehler.
- Die wirksamste Einzelmaßnahme ist meist, das Titelbild in einem modernen Format und passender Größe auszuliefern.
Von den drei Core Web Vitals ist LCP der Wert, der am ehesten dem entspricht, was ein Mensch als „die Seite ist da" empfindet, und der bei Betriebswebsites am häufigsten im gelben oder roten Bereich liegt.
Dieser Beitrag geht die Ursachen der Reihe nach durch, von der häufigsten zur seltensten.
Was genau gemessen wird
Der Browser sucht das größte Element, das im ersten sichtbaren Bereich erscheint, und misst, wann es fertig dargestellt ist. Infrage kommen:
- Bilder, auch Hintergrundbilder
- Videos mit Vorschaubild
- Blöcke mit Text, meist die Hauptüberschrift
Wichtig: Es zählt nur, was ohne Scrollen sichtbar ist. Ein großes Bild weiter unten spielt für LCP keine Rolle.
Auf einer typischen Betriebswebsite ist das LCP-Element das große Bild ganz oben, oder, wenn keines vorhanden ist, die Überschrift.
Ursache 1: Das Bild ist zu groß
Die mit Abstand häufigste Ursache und die am einfachsten zu behebende.
Ein Foto aus der Kamera hat 4.000 Pixel Breite und mehrere Megabyte. Angezeigt wird es mit 1.200 Pixeln. Wer das Original ausliefert, überträgt ein Vielfaches der nötigen Daten, im Mobilfunknetz kostet das Sekunden.
Drei Schritte, die zusammen fast immer genügen:
- Vor dem Hochladen verkleinern. 1.600 Pixel Breite reichen für nahezu jede Darstellung.
- Modernes Format verwenden. WebP ist bei gleicher Qualität etwa ein Drittel kleiner als JPEG. Wir liefern die Titelbilder dieses Blogs als WebP aus, 29 statt 67 Kilobyte bei identischem Aussehen.
- Größenangaben setzen. Breite und Höhe am Bild verhindern zugleich das Springen des Layouts.
Werte aus diesem Projekt. Die letzte Zeile ist das Titelbild dieses Beitrags, eine erzeugte Grafik komprimiert deutlich besser als ein Foto.
Ursache 2: Die Schrift wird nachgeladen
Wenn das LCP-Element eine Überschrift ist, hängt der Wert an der Schrift. Und wenn die Schrift von einem fremden Server kommt, passiert Folgendes: Der Browser lädt die Seite, findet den Verweis auf die Schrift, baut eine neue Verbindung auf, lädt die Datei, und zeigt bis dahin nichts oder einen Platzhalter.
Zwei Maßnahmen:
- Schriften selbst hosten. Sie liegen dann auf Ihrem Server, es entfällt eine Verbindung. Das löst nebenbei die datenschutzrechtliche Frage, die bei Schriften von fremden Servern entsteht.
- `font-display: swap` setzen. Der Text erscheint sofort in einer Ersatzschrift und wird ausgetauscht, sobald die richtige da ist. Sichtbarer Inhalt schlägt perfekte Typografie.
Ursache 3: Etwas blockiert den Aufbau
Skripte und Stilangaben im Kopfbereich der Seite können den Aufbau anhalten, bis sie geladen sind. Typische Kandidaten auf Betriebswebsites:
- Einwilligungswerkzeuge, die vor allem anderen laden
- Chatfenster von Drittanbietern
- Statistik- und Werbeskripte
- Umfangreiche Stilangaben, von denen nur ein Bruchteil im sichtbaren Bereich gebraucht wird
Was hilft: Skripte mit `defer` laden, damit sie den Aufbau nicht anhalten. Und die Stilangaben für den sichtbaren Bereich direkt in die Seite schreiben, den Rest nachladen. Letzteres machen wir auf dieser Website, die Farben und Grundformen stehen in der Seite selbst, sonst würde beim Laden kurz eine weiße Fläche aufblitzen.
Wie lange dauert Ihr Titelbild?
Öffnen Sie Ihre Startseite im Mobilfunknetz und zählen Sie mit. Über drei Sekunden? Dann sprechen wir dreißig Minuten darüber. Kostenlos.
Analysegespräch buchenDer Fehler, den man selbst macht
- loading="lazy" an allen Bildern
- Auch das Titelbild verzögert
- Keine Größenangaben
- Bild erst per Skript eingefügt
- Titelbild sofort laden
- fetchpriority="high" am LCP-Element
- Breite und Höhe gesetzt
- Bild direkt im HTML
Das ist der häufigste selbst verursachte Fehler: Jemand liest, dass verzögertes Laden die Seite beschleunigt, setzt es an jedes Bild, und verschlechtert damit genau den Wert, den er verbessern wollte. Das Bild ganz oben muss zuerst geladen werden, nicht zuletzt.
Wie Sie messen
Schritt 03 lohnt den Blick: Wenn ein Einwilligungsbanner das größte Element ist, wird er gemessen, und dann hilft kein optimiertes Titelbild.
Bilder richtig ausliefern, praktisch
Wenn die Bildgröße die Hauptursache ist, lohnt ein genauerer Blick darauf, wie man es sauber löst, ohne dass jemand vor jedem Hochladen Bildbearbeitung betreiben muss.
Der einfachste Weg: Vor dem Hochladen auf 1.600 Pixel Breite verkleinern und als WebP speichern. Das kann jedes Bildprogramm, auch die Vorschau-App auf dem Rechner.
Der bequemere Weg: Das Redaktionssystem erzeugt die Größen selbst. Beim Hochladen entstehen automatisch mehrere Fassungen, und der Browser wählt die passende. Das ist der Normalfall bei gut gebauten Websites und der Grund, warum dort niemand über Bildgrößen nachdenken muss.
Was in beiden Fällen dazugehört: Ein Rückfallformat. Nicht jeder Browser kann jedes moderne Format, auch wenn WebP inzwischen praktisch überall funktioniert. Über ein `<picture>`-Element wird WebP angeboten und ein JPEG oder PNG als Rückfall hinterlegt.
Ein Hinweis für alle, die Bilder in sozialen Netzwerken teilen: Das Vorschaubild beim Teilen sollte kein WebP sein. Einzelne Netzwerke stellen es dort bis heute nicht zuverlässig dar. Wir liefern deshalb auf der Website WebP aus und hinterlegen als Vorschaubild ein PNG, zwei Formate desselben Bildes, jedes an der Stelle, an der es funktioniert.
Was Sie bei einem Baukasten tun können
Bei Websites aus einem Baukasten sind die Eingriffsmöglichkeiten begrenzt, aber nicht null. Was auch dort geht:
- Kleinere Bilder hochladen. Der wirksamste Hebel, und er funktioniert überall. Wenn der Baukasten das Original ausliefert, entscheidet allein, was Sie hineingeben.
- Weniger Elemente im sichtbaren Bereich. Ein Karussell mit fünf Bildern lädt fünf Bilder. Ein einzelnes Bild lädt eines.
- Nicht benötigte Zusatzmodule entfernen. Jedes Chat-, Bewertungs- oder Statistikmodul kostet Ladezeit. Prüfen Sie, welche davon tatsächlich benutzt werden.
- Videos nicht automatisch abspielen. Ein Video im Kopfbereich ist der teuerste Inhalt, den eine Seite haben kann.
Was nicht geht: Schriften selbst hosten, Skripte anders einbinden, Stilangaben aufteilen. Dort ist die Grenze erreicht, meist im gelben Bereich.
Ob sich ein Wechsel lohnt, entscheidet eine einzige Frage: Bringt die Website messbar Anfragen? Wenn ja, rechnet sich die Investition. Wenn sie nur Visitenkarte ist, reicht der gelbe Bereich vollkommen.
Häufige Fragen
Mein Testwerkzeug zeigt gute Werte, Google meldet Probleme. Warum?
Weil das Werkzeug einen Laborwert unter idealen Bedingungen liefert. Google bewertet echte Aufrufe mit langsameren Geräten und schlechteren Verbindungen.
Wie stark wirkt LCP auf das Ranking?
Als Signal schwach. Der eigentliche Grund, es zu verbessern, sind die Abbrüche: Wer im Mobilfunknetz vier Sekunden wartet, ist oft weg, bevor er etwas gelesen hat.
Bringt ein schnellerer Server etwas?
Selten so viel wie erhofft. Bei Betriebswebsites liegt der Engpass fast immer bei den ausgelieferten Dateien, nicht bei der Antwortzeit des Servers.
Was ist mit Bildern im Hintergrund per CSS?
Die zählen auch als LCP-Element, werden aber später entdeckt als ein Bild im HTML. Für das größte Bild oben ist ein normales Bildelement die bessere Wahl.
Wie lange dauert die Verbesserung?
Die Änderung wirkt sofort, die Messung nicht: Die Feldwerte laufen über 28 Tage. Rechnen Sie mit vier bis sechs Wochen bis zur sichtbaren Verbesserung im Bericht.
Der nächste Schritt
Sehen Sie in PageSpeed Insights nach, welches Element als LCP gemessen wird. In den meisten Fällen ist es ein Bild, und dann ist die erste Maßnahme, es kleiner auszuliefern.
Verwandte Beiträge: Core Web Vitals: die drei Werte, Website-Relaunch-Checkliste und Cookie-Banner. Wie wir Seiten bauen, steht unter Digitale Markenbildung. Oder anrufen unter 07903 943946.