LCP (Largest Contentful Paint)
Definition
LCP (Largest Contentful Paint) ist eine Core Web Vital Metrik, die misst, wie lange es dauert, bis das größte sichtbare Inhaltselement im Viewport einer Webseite gerendert wird. Als "größtes Inhaltselement" gelten Bilder, Videos, Hintergrundbilder und große Textblöcke. Google bewertet einen LCP-Wert unter 2,5 Sekunden als "Gut", 2,5-4 Sekunden als "Verbesserungswürdig" und über 4 Sekunden als "Schlecht".
Erläuterung
Das LCP-Element ist oft das Hero-Bild einer Seite, ein prominentes Banner oder ein großer Textblock im oberen Seitenbereich. Häufige Ursachen für schlechte LCP-Werte sind: langsamer Server-Response-Tims (TTFB), Render-blockierendes CSS oder JavaScript, große Bildressourcen ohne Optimierung und fehlende Priorisierung kritischer Ressourcen. Lösungsansätze umfassen: Bilder mit fetchpriority="high" priorisieren, LCP-Bild nicht lazy-loaden, kritisches CSS inline einbetten und HTTP/2 Push für kritische Ressourcen nutzen. Server-seitig hilft ein schneller TTFB durch Caching, CDN und optimierte Datenbankabfragen. Lighthouse und Chrome DevTools zeigen das LCP-Element direkt an, was die Identifikation und Optimierung erheblich erleichtert.
<link rel="preload">) und kein loading="lazy"-Attribut trägt. Optimieren Sie das LCP-Bild in das WebP-Format mit der optimalen Grösse für den Viewport, da übergroße Bilder den größten LCP-Einfluss haben.