Was ist LCP?

LCP (Largest Contentful Paint) markiert den Zeitpunkt, an dem das größte Element im sichtbaren Bereich des Bildschirms (in der Regel ein Hero-Image, Produktfoto oder eine große Überschrift) vollständig gerendert ist. Von den Core Web Vitals spiegelt es das Gefühl des Nutzers, dass „die Seite geladen ist“, am besten wider.

#Warum es wichtig ist

• Besucher verlassen die Seite möglicherweise, bevor sie den Hauptinhalt sehen; jede Sekunde zählt, insbesondere in mobilen Netzwerken.
• LCP ist eine der drei Metriken in Googles Bewertung der Seitenerfahrung (Page Experience).
• Die Ursachen für einen langsamen LCP sind meist wenige und messbar: langsame Serverantwort (TTFB), zu große Bilder, Render-blocking CSS/JS, ein spät ladendes Hero-Image.

#Wo Sie es in SEOAsist sehen

• Die Karte Core Web Vitals auf der Seite Übersicht zeigt den LCP in Sekunden an, getrennt für Mobilgeräte und Desktop.
• Die SEO-Analyse führt ein Ergebnis Langsamer LCP auf, wenn der mobile LCP 2,5 Sekunden überschreitet.
• Das Problem Langsame Antwort (> 3 s) in Gesundheit weist auf Serverantwortzeiten hin, die den LCP direkt verzögern.

Mehr: Übersichts-Dashboard.

#Beispiel

Laden Sie das Hero-Image mit hoher Priorität und schließen Sie es vom Lazy Loading aus:

<link rel="preload" as="image" href="/img/hero-1200.webp" fetchpriority="high">

<img src="/img/hero-1200.webp" width="1200" height="600"
     alt="Oak dining table collection" fetchpriority="high">

#Häufige Fehler

• Dem Hero-Image loading="lazy" zuzuweisen, sodass das LCP-Element erst spät lädt.
• Ein 3000-Pixel-Bild an Smartphones zu senden; nutzen Sie srcset und WebP/AVIF.
• Den Haupttext auszublenden, bis eine Web-Schriftart geladen ist; verwenden Sie font-display: swap.
• Nur am Frontend zu arbeiten und Server sowie Caching zu ignorieren.