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

Was ist First Contentful Paint (FCP)?

First Contentful Paint (FCP) ist die Zeit vom Beginn der Navigation, bis der Browser zum ersten Mal Inhalt der Seite zeichnet: Text, ein Bild (auch ein Hintergrundbild), eine SVG oder ein nicht weißes Canvas. Es ist das erste Zeichen für Besucher, dass die Seite lädt, und damit ein guter Indikator für die wahrgenommene Ladegeschwindigkeit.

FCP gehört nicht zu den Core Web Vitals, das sind LCP, INP und CLS. web.dev führt es unter den ergänzenden Metriken, nützlich zur Diagnose eines langsamen Largest Contentful Paint: Das größte Element kann nicht vor dem ersten Inhalt erscheinen.

FCP-Schwellenwerte

web.dev empfiehlt, das 75. Perzentil der Seitenaufrufe zu bewerten, getrennt nach Mobilgeräten und Desktop. Eine Seite gilt als "gut", wenn mindestens 75 % der Besuche den ersten Inhalt innerhalb von 1,8 Sekunden zeichnen.

Beispiel

Eine Produktseite ist als Single-Page-App gebaut. Der Server antwortet schnell, aber das HTML ist ein leerer Container, sodass Besucher auf einen weißen Bildschirm starren, bis ein großes JavaScript-Bundle geladen und ausgeführt ist. FCP wartet auf all das. Wird das Seitengerüst serverseitig gerendert oder das kritische CSS inline eingebunden und das Bundle verzögert geladen, erscheint der erste Text lange vor dem Ende des Bundles.

Was FCP beeinflusst

• Serverantwort. Vor dem ersten Byte wird nichts gezeichnet; eine langsame TTFB und Weiterleitungen setzen eine Untergrenze für FCP.
• Render-blockierende Ressourcen. CSS und synchrones JavaScript im Head müssen geladen sein, bevor der Browser zeichnen kann.
• Aufwendiges Client-Side-Rendering. Der erste Inhalt wartet, bis JavaScript geladen, geparst und ausgeführt ist.
• Webfonts, die Text verbergen. Der Text bleibt unsichtbar, bis die Schrift da ist.
• Große Payloads und lange Anfrageketten. Fehlende Preconnects, schwaches Caching und viele Requests kosten Zeit.

So messen Sie FCP

Im Feld liefert die Performance API FCP als Paint-Eintrag:

new PerformanceObserver((list) => {
  for (const entry of list.getEntriesByName('first-contentful-paint')) {
    console.log('FCP:', entry.startTime);
  }
}).observe({ type: 'paint', buffered: true });

Im Labor melden Lighthouse und das Performance-Panel der Chrome DevTools den Wert. Feldwerte zeigt PageSpeed Insights aus dem Chrome UX Report, oder Sie erfassen sie mit der web-vitals-Bibliothek selbst. Labor- und Feldwerte weichen oft ab, weil Laborläufe ein festes Gerät und Netz verwenden.

So verbessern Sie FCP

1. Serverantwortzeit mit Caching und CDN senken und Weiterleitungen entfernen.
2. Nicht kritisches CSS verzögern und defer oder async bei Skripten setzen, die für das erste Zeichnen nicht nötig sind.
3. Das kritische CSS des sichtbaren Bereichs inline einbinden.
4. Früh benötigte Ursprünge per Preconnect verbinden, wie unten gezeigt.
5. CSS und JavaScript minifizieren und komprimieren.
6. font-display: swap nutzen, damit Text in einer Ersatzschrift erscheint, während die Webfont lädt.

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

Häufige Fehler

• FCP als Ziel behandeln. Ein kleines Logo erscheint früh, während das Hero-Bild Sekunden braucht. Prüfen Sie auch LCP.
• Nur auf einem schnellen Desktop testen. Bewerten Sie Mobil und Desktop getrennt, wie web.dev empfiehlt.
• Labor- und Feldwerte direkt vergleichen. Ein guter Lighthouse-Wert garantiert keine guten Felddaten.
• Das Geschehen vor dem Rendern ignorieren. Weiterleitungen, Verbindungsaufbau und TTFB zählen alle zum FCP.

Häufige Fragen: First Contentful Paint

Was ist ein guter FCP-Wert?

1,8 Sekunden oder weniger im 75. Perzentil der Seitenaufrufe. Zwischen 1,8 und 3,0 Sekunden ist verbesserungswürdig, über 3,0 Sekunden schlecht.

Ist FCP ein Core Web Vital?

Nein. Die Core Web Vitals sind LCP, INP und CLS. FCP ist eine ergänzende Metrik, die bei der Diagnose langsamer Ladezeiten hilft.

Wie unterscheidet sich FCP von LCP?

FCP markiert den ersten Inhalt beliebiger Größe, oft Text oder ein Logo. LCP markiert den Zeitpunkt, an dem das größte sichtbare Element, oft ein Hero-Bild oder eine Überschrift, gerendert ist.

Warum ist mein FCP langsam?

Übliche Ursachen sind eine langsame Serverantwort, Weiterleitungen, render-blockierendes CSS oder JavaScript, Client-Side-Rendering und Webfonts, die Text verbergen. PageSpeed Insights oder ein Lighthouse-Bericht zeigt, was überwiegt.

Kann FCP schnell sein, obwohl sich die Seite langsam anfühlt?

Ja. FCP sagt nur, dass etwas erschienen ist. Ein langsames LCP, Eingabeverzögerung oder Layoutverschiebungen können die Seite trotzdem träge wirken lassen, darum liest man FCP zusammen mit den Core Web Vitals.

FCP mit LoadFocus über die Zeit verfolgen

Nutzen Sie den kostenlosen Core Web Vitals Checker für einen schnellen Blick, oder das Page Speed Monitoring, um Ihre Seiten mit Lighthouse von mehreren Cloud-Standorten zu beobachten und bei Verschlechterung benachrichtigt zu werden. Die Anleitung zum Überwachen der Core Web Vitals mit Alerts und Reports zeigt die Einrichtung. Kostenlos registrieren und loslegen.