First Contentful Paint (FCP): Definition, Schwellenwerte, Fixes

Was ist First Contentful Paint (FCP)?

First Contentful Paint (FCP) misst die Zeit vom Beginn des Seitenladens bis der Browser den ersten DOM-Inhalt rendert: Text, ein Bild, ein Canvas oder ein SVG. Es ist der erste Moment, in dem ein Besucher sieht, dass etwas passiert, und damit ein zentrales Signal der wahrgenommenen Ladegeschwindigkeit.

FCP ist eine Lighthouse- und Felddaten-Metrik (CrUX). Es ist selbst kein Core Web Vital, hilft aber, das Lade-Core-Web-Vital Largest Contentful Paint (LCP) zu diagnostizieren: Ein langsames FCP bedeutet fast immer ein langsames LCP.

FCP-Schwellenwerte

Felddaten berichten FCP am 75. Perzentil der echten Nutzer. Eine Seite gilt nur dann als gut, wenn 75% der Besuche den ersten Inhalt in 1,8s oder weniger zeichnen.

Was zur FCP-Zeit beiträgt

• Time to First Byte (TTFB). Nichts wird gerendert, bevor der Server antwortet.
• Render-blockierende Ressourcen. Synchrones CSS und JavaScript im Head müssen vor dem Zeichnen geladen und geparst werden.
• Ressourcen-Ladezeit. Große CSS-Bundles und blockierende Schriften verschieben den ersten Paint nach hinten.
• Client-seitiges Rendering. Bei Single-Page-Apps wartet der erste Paint auf das JavaScript-Bundle.

So verbessern Sie FCP

1. TTFB reduzieren

Ein CDN nutzen, Antworten cachen und die Origin-Antwortzeiten niedrig halten.

2. Render-blockierende Ressourcen entfernen

Nicht kritisches CSS verzögern und Skripte mit defer oder async laden.

3. Kritisches CSS inline einbinden

Above-the-fold-Stile in einem <style>-Tag im Head, damit der erste Paint nicht auf eine externe Datei wartet.

4. Zu erforderlichen Origins preconnecten

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

5. Minimieren und komprimieren

CSS und JavaScript minimieren und mit Brotli oder gzip ausliefern.

6. Schrift-blockierten Text vermeiden

Mit font-display: swap wird Text sofort mit einer Fallback-Schrift gezeichnet.

FAQ: First Contentful Paint

Was ist ein guter FCP-Wert?

1,8 Sekunden oder weniger am 75. Perzentil. 1,8s bis 3s ist verbesserungswürdig, über 3s ist schlecht.

Ist FCP ein Core Web Vital?

Nein. Die Core Web Vitals sind LCP, INP und CLS. FCP ist eine unterstützende Lade-Metrik.

Wie unterscheidet sich FCP von LCP?

FCP markiert den ersten Inhalt beliebiger Größe, oft ein Logo. LCP markiert das größte Element, meist das Hero-Bild.

FCP aus echten Regionen mit LoadFocus testen

LoadFocus führt Lighthouse-Audits aus über 25 Regionen aus und zeigt Felddaten echter Nutzer. Kostenlos registrieren unter loadfocus.com/signup.