FCP (First Contentful Paint)

Definition

FCP (First Contentful Paint) ist eine Web-Performance-Metrik, die misst, wie lange es dauert, bis der Browser das erste sichtbare Inhaltselement einer Seite gerendert hat – sei es Text, ein Bild oder ein Canvas-Element. Sie markiert den Moment, ab dem der Nutzer das erste visuelle Feedback erhält, dass die Seite geladen wird. Ein guter FCP-Wert liegt unter 1,8 Sekunden.

Erläuterung

FCP ist eine wahrgenommene Performance-Metrik und wichtiger für die gefuehlte Ladegeschwindigkeit als die technisch vollständige Ladezeit. Sie wird von Render-blockierenden Ressourcen (CSS, synchrones JavaScript) stark beeinflusst: Solange diese nicht geladen und verarbeitet sind, kann der Browser nichts rendern. Kritisches CSS – der minimale CSS-Code, der für die "above the fold"-Darstellung benötigt wird – kann inline in den HTML-Head eingebettet werden, um den ersten Paint zu beschleunigen. Die Netzwerk-Geschwindigkeit und der TTFB haben direkten Einfluss auf den FCP: Ein schlechter TTFB führt unweigerlich zu einem schlechten FCP. Lighthouse und PageSpeed Insights zeigen FCP-Werte an und geben Empfehlungen zur Verbesserung.

Praxistipp: Entfernen oder verzögern Sie Render-blockierende CSS- und JavaScript-Ressourcen, um FCP zu verbessern – jede blockierende Ressource im Head verzögert den ersten sichtbaren Inhalt. Inlinen Sie kritisches CSS direkt im HTML-Head (unter 14KB), damit der Browser sofort mit dem Rendern beginnen kann, ohne auf eine externe CSS-Datei zu warten.