First Contentful Paint (FCP) misst die Zeitspanne zwischen dem Navigationsstart und dem Moment, in dem der Browser den ersten sichtbaren Inhalt rendert — sei es Text, ein Bild, ein SVG oder ein nicht-weisses Canvas-Element. FCP beantwortet die Frage: "Wann sieht der Nutzer zum ersten Mal etwas?"
FCP ist eine zentrale diagnostische Metrik im Web-Performance-Kontext. Obwohl kein Core Web Vital, wird FCP von Google in PageSpeed Insights prominent ausgewiesen und beeinflusst direkt die wahrgenommene Ladegeschwindigkeit einer Website.
Abgrenzung zu anderen Paint-Metriken
| Metrik | Was sie misst | Bedeutung |
|---|---|---|
| First Paint (FP) | Erster visueller Unterschied (auch Hintergrundfarbe) | Technisch, wenig aussagekraeftig |
| First Contentful Paint (FCP) | Erster sinnvoller Inhalt (Text, Bild) | Wahrgenommener Ladestart |
| Largest Contentful Paint (LCP) | Groesstes sichtbares Element im Viewport | Wahrgenommene Vollstaendigkeit |
FCP und LCP markieren zusammen den Beginn und das Ende der visuellen Ladeerfahrung. Ein schneller FCP signalisiert dem Nutzer, dass die Seite laedt. Ein schneller LCP signalisiert, dass der Hauptinhalt verfuegbar ist.
Bewertungsskala
| Bewertung | FCP | Perzentil |
|---|---|---|
| Gut | < 1,8s | 75. Perzentil |
| Verbesserung noetig | 1,8-3,0s | 75. Perzentil |
| Schlecht | > 3,0s | 75. Perzentil |
Was FCP blockiert
Render-blockierende Ressourcen
Der Browser kann keinen Inhalt rendern, bevor er alle kritischen CSS- und JavaScript-Dateien geladen und verarbeitet hat. Die haeufigsten Blocker:
- CSS-Dateien im
<head>: Jedes Stylesheet blockiert das Rendering - Synchrones JavaScript im
<head>: Scripts ohneasyncoderdefer - Web Fonts: Unoptimierte Font-Dateien verzoegern die Textanzeige
Server-Antwortzeit
Ein langsamer Time to First Byte (TTFB) verzoegert alles Nachfolgende, einschliesslich FCP. Die Optimierung beginnt daher immer beim Server.
Grosse DOM-Baeume
Ein sehr grosser DOM-Baum (>1.500 Elemente) verlangsamt das initiale Parsing und Rendering. Besonders auf mobilen Geraeten mit weniger CPU-Leistung wirkt sich das spuerbar aus.
Optimierungsmassnahmen
Kritisches CSS inlinen
Das CSS, das fuer den sichtbaren Bereich (Above the Fold) benoetigt wird, sollte direkt im <head> als <style>-Block eingebettet werden. Zusaetzliches CSS wird asynchron nachgeladen. Tools wie Critical oder critters automatisieren diesen Prozess.
JavaScript optimieren
deferfuer Scripts, die den DOM benoetigen aber nicht render-blockierend sindasyncfuer unabhaengige Scripts (Analytics, Tracking)- Code Splitting: Nur den Code laden, der fuer die aktuelle Seite benoetigt wird
- Tree Shaking: Ungenutzten Code aus dem Bundle entfernen
Font-Optimierung
Web Fonts sind ein haeufiger FCP-Killer. Optimierungen:
font-display: swap: Zeigt Fallback-Schrift sofort, tauscht bei Font-Load- Fonts vorabladen:
<link rel="preload" href="font.woff2" as="font" crossorigin> - Subset: Nur die benoetigten Zeichen einbinden
- Variable Fonts: Eine Datei statt mehrerer Gewichte
Preload und Preconnect
Resource Hints beschleunigen das Laden kritischer Ressourcen:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/critical.css" as="style">
FCP in Next.js
Next.js bietet mehrere eingebaute Optimierungen, die FCP verbessern:
- Automatisches Code Splitting: Jede Seite laedt nur ihren eigenen Code
- Font-Optimierung:
next/fontlaedt Fonts optimal mit Size-Adjust und Display-Swap - Image-Optimierung:
next/imagemit automatischer Groessenanpassung und modernen Formaten - Static Site Generation: Vorgerenderte HTML-Seiten haben den schnellsten FCP
FCP und SEO
FCP beeinflusst die SEO indirekt, da es die Nutzererfahrung praegt. Langsame Seiten haben hoehere Bounce Rates, kuerzere Verweildauer und niedrigere Conversion Rates. Ausserdem korreliert FCP stark mit dem LCP, der ein offizielles Core Web Vital und damit ein direktes Ranking-Signal ist.
Die Optimierung von FCP ist oft der erste Schritt in einem umfassenden Page-Speed-Optimierungsprozess — denn was schnell beginnt, wird als insgesamt schneller wahrgenommen.