First Contentful Paint (FCP): Wann die Seite sichtbar wird

First Contentful Paint (FCP) ist die Web-Performance-Metrik, die angibt, wann der Browser nach dem Aufruf einer Seite den ersten sichtbaren Inhalt rendert — etwa Text, ein Bild, ein SVG oder einen nicht weißen Canvas. Ein guter FCP liegt bei 1,8 Sekunden oder weniger, Werte über 3 Sekunden gelten als schlecht (75. Perzentil der realen Nutzer).

FCP, LCP und INP im Unterschied

FCP markiert den Moment, in dem überhaupt etwas auf dem Bildschirm erscheint — der Nutzer sieht, dass die Seite arbeitet. LCP (Largest Contentful Paint) geht einen Schritt weiter und misst, wann das größte Hauptelement (Hero-Bild, Überschrift) vollständig geladen ist. Während FCP und LCP das Laden beschreiben, misst INP die Reaktionsfähigkeit und CLS die Stabilität. FCP selbst gehört nicht zu den drei offiziellen Core Web Vitals, ist aber eine wichtige Zusatzmetrik, weil ein langsames FCP fast immer auch LCP und INP belastet.

Was FCP verlangsamt

Langsame Serverantwort (TTFB): Je später die ersten Bytes kommen, desto später der erste Paint.
Render-blockierende Ressourcen: CSS und JavaScript im <head> verzögern das Rendering, bis sie geladen und ausgeführt sind.
Web-Fonts: Während der Font lädt, bleibt Text oft unsichtbar (FOIT) — font-display: swap hilft.
Unnötig große Bilder und Skripte: Sie blockieren den Haupt-Thread und verschieben den ersten Inhalt nach hinten.

FCP verbessern

Server-Antwortzeit senken: Caching, CDN, komprimierte Antworten (Brotli/gzip).
Kritisches CSS inline ausliefern und restliches CSS verzögert laden.
JavaScript mit defer/async laden, damit es das erste Rendering nicht blockiert.
Moderne Bildformate wie WebP mit loading="lazy" für nicht kritische Bilder einsetzen.

Gemessen wird FCP über die Navigation-Timing- und Paint-Timing-API sowie mit Lighthouse und PageSpeed Insights. Ein schnelles FCP verbessert neben der Nutzererfahrung auch die SEO-Bewertung der Seite.