Largest Contentful Paint (LCP): Hauptinhalt schneller laden

Warum das wichtig ist

LCP ist einer der drei Core Web Vitals, mit denen Google die Nutzererfahrung bewertet, neben CLS und INP. Die Kennzahl kommt dem Gefühl "die Seite ist da" am nächsten. Ein Logo und ein Menü nach einer Sekunde helfen wenig, wenn das große Bild mit deinem Angebot erst nach fünf Sekunden auftaucht.

Welches Element zählt, entscheidet der Browser: das größte Bild, Vorschaubild eines Videos oder der größte Textblock im ersten sichtbaren Bereich. Auf dem Handy ist das oft ein anderes Element als am Desktop.

So prüfst du es selbst

In PageSpeed Insights steht LCP im Reiter Mobil bei den Messwerten. In den Diagnosen zeigt Lighthouse, welches Element das LCP-Element ist und wie sich die Zeit aufteilt. Diese Aufteilung ist Gold wert. Sie zeigt, ob der Server zu spät antwortet, das Bild zu spät entdeckt wird, zu lange lädt oder nach dem Laden noch auf etwas wartet.

Achte darauf, welchen Wert du gerade anschaust. Oben zeigt PageSpeed Insights Felddaten echter Besucher, falls genug vorhanden sind. Darunter steht der Laborwert aus einer einzelnen simulierten Messung auf einem gedrosselten Handy. Die beiden können weit auseinanderliegen. Für das Ranking zählen die Felddaten, zum Fehlersuchen ist das Labor besser, weil du sofort siehst, ob eine Änderung wirkt.

Mit dem kostenlosen Check von checkfrei bekommst du LCP automatisch mit, gemessen über PageSpeed Insights in der mobilen Ansicht. Bis 2,5 Sekunden ist gut, bis 4 Sekunden gibt es eine Warnung, darüber einen Fehler.

So behebst du es

Meistens ist das LCP-Element ein Bild. Dann geh diese Punkte durch:

1. 01Bild verkleinern. Ein Hauptbild fürs Handy braucht keine 3000 Pixel Breite. Mit srcset lieferst du je nach Bildschirm die passende Größe aus, am besten als WebP oder AVIF (Bildformate).
2. 02Kein loading="lazy" am Hauptbild. Lazy Loading ist für Bilder weiter unten gedacht (Lazy Loading), oben verzögert es ausgerechnet das wichtigste Bild.
3. 03fetchpriority="high" setzen. Damit lädt der Browser das Bild vor weniger wichtigen Dateien.
4. 04Hintergrundbilder aus dem CSS vorladen. Ein Bild, das nur in einer CSS-Datei steht, entdeckt der Browser spät. Ein <link rel="preload"> im Kopf der Seite holt es nach vorn.
5. 05Server und blockierende Dateien prüfen. Kommt das erste Byte erst nach einer Sekunde (Antwortzeit) oder halten Skripte den Aufbau an (blockierende Skripte), hilft das schnellste Bild nichts.

<!-- Hauptbild oben: passende Größen, kein lazy, hohe Priorität -->
<img
  src="/bilder/start-1200.webp"
  srcset="/bilder/start-640.webp 640w, /bilder/start-1200.webp 1200w"
  sizes="100vw"
  width="1200" height="675"
  alt="Werkstatt mit Kunden an der Theke"
  fetchpriority="high">

<!-- Nur nötig, wenn das Bild als CSS-Hintergrund eingebunden ist -->
<link rel="preload" as="image" href="/bilder/start-1200.webp" fetchpriority="high">

<Image
  src="/bilder/start.webp"
  alt="Werkstatt mit Kunden an der Theke"
  width={1200}
  height={675}
  sizes="100vw"
  fetchPriority="high"
  loading="eager"
/>

Wenn das LCP-Element Text ist

Ist es eine Überschrift, wartet der Text meist auf die Webschrift. Lade die Schrift vom eigenen Server, binde nur die Schnitte ein, die du wirklich brauchst, und setz font-display: swap. Dann erscheint der Text sofort in einer Ersatzschrift und wechselt, sobald die Webschrift da ist.