Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) misst, wann das grösste sichtbare Inhaltselement im sichtbaren Bereich geladen ist, und steht damit für die wahrgenommene Ladegeschwindigkeit.Zum Glossareintrag → gehört zu den Core Web VitalsCore Web Vitals sind ein Set von Google-Metriken, die die reale Nutzererfahrung einer Website in den Bereichen Ladeleistung, Interaktivität und visuelle Stabilität messen.Zum Glossareintrag → und misst den Zeitpunkt, zu dem das grösste sichtbare Element im Viewport fertig geladen ist. Häufig ist das ein Hero-Bild, ein Produktbild, eine grosse Überschrift oder ein grosser Textblock. Als guter Wert gilt ein LCP von höchstens 2,5 Sekunden.

Ein schlechter LCP entsteht oft durch ein grosses, unkomprimiertes Hero-Bild, einen langsamen Server, render-blockierendes CSSRender-blockierende Ressourcen sind Dateien wie CSS oder JavaScript, die der Browser laden und verarbeiten muss, bevor er die Seite darstellen kann, und so das Rendering verzögern.Zum Glossareintrag →, Lazy LoadingLazy Loading bezeichnet das verzögerte Nachladen von Inhalten wie Bildern erst dann, wenn sie in den sichtbaren Bereich gelangen, um die anfängliche Ladezeit zu reduzieren.Zum Glossareintrag → auf dem wichtigsten Bild oder fehlende Bildpriorisierung. Verbessern lässt sich LCP zum Beispiel so:

• Hauptbild komprimieren und in WebPWebP und AVIF sind moderne, platzsparende Bildformate, die bei vergleichbarer Qualität deutlich kleinere Dateien als JPEG oder PNG ermöglichen und so die Ladezeit verbessern.Zum Glossareintrag → oder AVIF ausliefern,
• responsive BilderResponsive Bilder liefern je nach Bildschirmgrösse und Auflösung des Geräts eine passend dimensionierte Bildvariante aus, damit nicht unnötig grosse Dateien geladen werden.Zum Glossareintrag → mit srcset bereitstellen,
• das LCP-Bild nicht lazy-loaden, sondern mit fetchpriority="high" priorisieren,
• kritisches CSSCascading Style Sheets (CSS) ist die Sprache, mit der das Layout und die Gestaltung von Webseiten festgelegt werden. CSS bestimmt unter anderem Farben, Schriften, Abstände und Anordnung.Zum Glossareintrag → früh laden und die Serverantwort (TTFBTime to First Byte (TTFB) ist die Zeit, bis der Browser das erste Byte der Serverantwort erhält, und beschreibt damit, wie schnell der Server reagiert.Zum Glossareintrag →) verbessern.