LCP misst, wann das größte sichtbare Element steht. Preload, fetchpriority und ein schneller Server drücken den Wert unter 2,5 Sekunden.
Marie Keller
Content Strategist
LCP verbessern heißt: das größte sichtbare Element deiner Seite so früh wie möglich rendern. Ziel sind unter 2,5 Sekunden im 75. Perzentil. Der Hebel ist fast immer dasselbe Bild oder derselbe Textblock oben im Viewport.
Largest Contentful Paint markiert den Moment, in dem das größte Element im sichtbaren Bereich fertig gezeichnet ist. Meist ist das ein Hero-Bild, ein Video-Poster oder eine große Überschrift. Google wertet den Wert im 75. Perzentil echter Nutzer, sichtbar in der Chrome-User-Experience-Report-Datenbank (CrUX). Alles bis 2,5 Sekunden gilt als gut, ab 4 Sekunden als schlecht.
Wichtig: LCP ist kein Lade-, sondern ein Render-Zeitpunkt. Ein Bild kann längst im Cache liegen und trotzdem spät erscheinen, weil ein Skript den Hauptthread blockiert. Deshalb reicht es nicht, nur die Dateigröße zu drücken. Du musst den gesamten Weg vom ersten Byte bis zum gemalten Pixel betrachten.
Rate nie. Öffne die DevTools, geh auf den Performance-Tab und starte eine Aufnahme mit Reload. Chrome markiert den LCP-Frame direkt in der Timeline und nennt dir das konkrete Element. Alternativ zeigt Lighthouse unter dem Diagnose-Punkt Largest Contentful Paint element den DOM-Knoten an.
WebPageTest liefert dir zusätzlich einen Filmstreifen und die einzelnen Ladephasen als Wasserfall. Dort siehst du, ob die Zeit im Server (Time to First Byte), in der Ressourcen-Entdeckung oder im Rendering verloren geht. Erst wenn du den Engpass kennst, wirkt jede Optimierung gezielt statt zufällig.
Google zerlegt LCP in vier Teile. Jeder hat einen eigenen Fix. Wenn du weißt, welcher Teil bei dir dominiert, sparst du dir wochenlanges Herumprobieren. Die folgende Liste ordnet die Phasen den passenden Maßnahmen zu.
Der Browser entdeckt dein Hero-Bild oft spät, weil es erst nach dem Parsen von CSS oder JavaScript im DOM auftaucht. Mit einem expliziten Preload zwingst du ihn, früh zu laden. Setze im Head: link rel preload as image mit dem konkreten href. Damit steht die Anfrage schon in der ersten Verbindungsrunde.
Noch präziser wirkt das fetchpriority-Attribut. Schreibst du fetchpriority high direkt an dein LCP-img, hebt der Browser diese Ressource über konkurrierende Downloads. Gleichzeitig gehört an alle Bilder unterhalb des Falzes ein loading lazy. So bekommt genau das eine wichtige Bild die volle Bandbreite. Nutze niemals Lazy-Loading für das LCP-Element selbst, das verzögert es garantiert.
LCP gewinnst du nicht mit einem Trick, sondern indem du dem Browser eindeutig sagst, welches Pixel zuerst wichtig ist.
Ein LCP-Textblock hängt oft an der Schrift. Lade kritische Fonts per preload und setze font-display swap, damit Text sofort mit einer Ersatzschrift erscheint. So blockiert kein unsichtbarer Text (FOIT) das Rendering. Reduziere außerdem die kritische CSS-Menge, indem du nur den für den ersten Viewport nötigen Stil inline stellst.
Auf der Serverseite zählt jede Millisekunde vor dem ersten Byte. Ein CDN mit Edge-Standort nahe am Nutzer, HTTP/2 oder HTTP/3 und ein schlanker Antwortweg verkürzen die Wartezeit. Vermeide Ketten aus Weiterleitungen: Jeder 301 kostet eine komplette Round-Trip-Zeit, die direkt in den LCP einfließt.
Zählt der LCP-Wert aus dem Lighthouse-Lab oder aus CrUX? Fürs Ranking zählt CrUX, also echte Nutzerdaten aus den letzten 28 Tagen. Lighthouse ist ein Labortest zum Debuggen. Nutze beides: Lighthouse zum Finden der Ursache, CrUX zum Messen des Erfolgs in der Realität.
Warum ist mein LCP mobil schlechter als am Desktop? Handys haben schwächere CPUs und langsamere Netze. Ein Bild, das am Desktop in 1,2 Sekunden steht, braucht mobil schnell das Dreifache. Liefere per srcset kleinere Varianten aus und teste konsequent mit Drosselung.
Hilft ein Preload immer? Nein. Preloadst du zu viele Ressourcen, konkurrieren sie um Bandbreite und keiner gewinnt. Preload nur das eine echte LCP-Element. Alles andere schadet mehr, als es nützt.
Miss, entdecke, priorisiere. Wer diese Reihenfolge einhält, drückt den LCP verlässlich unter 2,5 Sekunden, statt an Symptomen zu drehen.
Render-Blocking-Ressourcen halten das erste Pixel auf. Mit defer, async, kritischem CSS und Preconnect malt der Browser sofort statt zu warten.
Warum die passende Suchintention über Ranking entscheidet und wie du in vier Schritten Content baust, der die Frage hinter der Suche trifft.
Answer Engine Optimization bringt deine Marke in die Antworten von ChatGPT und Perplexity. So wirst du zur zitierten Quelle statt zum blauen Link.
