Largest Contentful Paint (LCP)

Largest Contentful Paint ist eine der drei zentralen Core-Web-Vitals-Metriken, die Google seit 2021 als Ranking-Faktor nutzt. LCP misst den Zeitpunkt, zu dem das groesste im Viewport sichtbare Element vollstaendig gerendert ist -- typischerweise ein Hero-Bild, ein Video-Thumbnail oder ein langer Textblock.

Die Bewertungsskala: Gut (unter 2,5 Sekunden), verbesserungsbeduerftig (2,5-4 Sekunden) und schlecht (ueber 4 Sekunden). Gemessen wird an der 75-Perzentil-Grenze der tatsaechlichen Nutzerbesuche (CrUX-Report, Real User Monitoring). Lab-Tests wie Lighthouse liefern nur eine Annaeherung.

Typische LCP-Killer sind: unoptimierte Bilder (PNG statt WebP/AVIF, keine responsive srcset), blockierende JavaScript-Skripte, serverseitige Langsamkeit (unter TTFB 600ms anstreben), fehlende Preload-Hints fuer kritische Assets, und Custom-Fonts ohne font-display: swap.

Praktische LCP-Optimierung: Das LCP-Element identifizieren (Chrome DevTools -> Performance Tab), Bilder in modernen Formaten ausliefern (AVIF bevorzugt, WebP als Fallback), ein preload-Hint im Head setzen, inline critical CSS einbetten, Server-Side-Rendering statt Client-Side nutzen, und einen CDN fuer Edge-Caching verwenden.

Fuer Next.js-Websites: Die Image-Komponente mit priority-Flag fuer LCP-Bilder markieren, automatische Format-Optimierung aktivieren, fetchPriority="high" auf kritischen Ressourcen setzen. Gute LCP-Werte unter 1,5 Sekunden sind mit Next.js 16 plus Cloudflare-CDN problemlos erreichbar.

Ein konkretes Alunah-Kundenbeispiel: Ein Autohaus in Sassenburg hatte LCP 4,8s, nach Migration auf Next.js mit AVIF-Hero-Image und CDN-Setup nur noch 1,2s -- parallel stieg die Conversion-Rate um 47 %.