First Contentful Paint (FCP)

First Contentful Paint, kurz FCP, misst, wie lange es dauert, bis der erste Inhalt auf dem Bildschirm erscheint, nachdem jemand eine Seite aufgerufen hat. Dieser erste Farbauftrag ist der Moment, in dem aus einer leeren weißen Fläche etwas wird, das erste Zeichen für den Besucher, dass die Seite lädt und nicht defekt ist. Ein schneller FCP beruhigt, ein langsamer lässt Menschen ins Leere blicken. Dieser Leitfaden erklärt, was FCP misst, welcher Wert gut ist, worin er sich von LCP unterscheidet und wie er sich verbessern lässt.

Was FCP misst

FCP erfasst die Zeit von der Navigation bis zum ersten gerenderten Inhalt aus dem DOM. Dieser Inhalt kann Text, ein Bild, ein SVG oder eine nicht-weiße Zeichenfläche sein, im Grunde das erste, was kein leerer Hintergrund ist. FCP markiert also den Beginn des Renderns, nicht den Abschluss oder die Benutzbarkeit der Seite, und ist damit ein reines Maß dafür, wie schnell der Browser überhaupt loslegt.

Weil nur der erste Farbauftrag zählt, wird FCP stark von allem beeinflusst, was vor dem Rendern passiert: von der Serverantwort und von Ressourcen, die den Browser am Zeichnen hindern.

Was ist ein guter FCP-Wert?

Google definiert drei Bereiche, gemessen am 75. Perzentil der realen Seitenaufrufe über mobile und stationäre Geräte:

• Gut: 1,8 Sekunden oder schneller
• Verbesserungswürdig: zwischen 1,8 und 3 Sekunden
• Schlecht: mehr als 3 Sekunden

FCP fließt außerdem gewichtet in den Lighthouse-Performance-Score ein. Eine Verbesserung hebt also sowohl die reale Erfahrung als auch den Laborwert in PageSpeed Insights.

Ist FCP ein Core Web Vital?

Nein, und das ist wichtig festzuhalten. FCP gehört nicht zu den drei Core Web Vitals und ist damit kein direktes Google-Ranking-Signal wie Largest Contentful Paint, Cumulative Layout Shift und Interaction to Next Paint. FCP ist eine diagnostische Ladekennzahl. Allerdings teilen FCP und LCP die meisten Ursachen, sodass ein schneller FCP meist der erste Schritt zu einem schnellen Largest Contentful Paint ist, und LCP ist ein Ranking-Faktor. Die Arbeit an FCP ist also selten vergebens.

Wie sich FCP von LCP unterscheidet

Die beiden lassen sich leicht verwechseln. First Contentful Paint markiert, wann der erste Inhalt beliebiger Art erscheint. Largest Contentful Paint markiert, wann das größte, bedeutsamste Element erscheint. FCP zeigt, dass das Rendern begonnen hat, LCP, dass der Hauptinhalt da ist, für den der Besucher gekommen ist. Eine Seite kann einen schnellen FCP haben, weil früh eine Kopfzeile und etwas Text erscheinen, und trotzdem einen langsamen LCP, weil das Hero-Bild erst viel später eintrifft. Beide sollten schnell sein, und sie werden durch überlappende, aber nicht identische Maßnahmen verbessert.

Feld- und Labdaten

FCP erscheint sowohl in Laborwerkzeugen wie Lighthouse als auch in den Felddaten des Chrome UX Report, die reale Nutzer über ein nachlaufendes 28-Tage-Fenster abbilden. Im Browser lässt sich FCP über die Paint-Timing-API auslesen:

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

Was FCP beeinflusst

Alles auf dem kritischen Pfad zwischen der Anfrage und dem ersten Farbauftrag geht in FCP ein:

• Server-Antwortzeit. Eine langsame Time to First Byte verzögert den Moment, in dem der Browser die HTML überhaupt erhält.
• Rendernblockierendes CSS und JavaScript. Der Browser zeichnet nicht, bevor er blockierende Ressourcen im Kopf verarbeitet hat.
• Webschriften. Text kann zurückgehalten werden, wenn er auf eine Schrift wartet, statt eine Ersatzschrift zu zeigen.
• Eine lange kritische Anfragekette. Jede Abhängigkeit, die der Browser vor dem Rendern laden muss, addiert sich.

FCP verbessern

1. Server-Antwortzeit senken

Nichts kann gezeichnet werden, bevor die HTML eintrifft, deshalb ist eine schnelle Time to First Byte das Fundament. Caching und ein CDN sind hier die größten Hebel.

2. Rendernblockierende Ressourcen entfernen

Rendernblockierendes CSS und JavaScript im Kopf sind die häufigste Ursache eines langsamen FCP. Unkritische Skripte verzögern, das kritische CSS inline auslehen und den Rest asynchron laden.

3. Text sofort zeigen mit font-display

Mit font-display: swap erscheint der Text sofort in einer Ersatzschrift, statt auf die Webschrift zu warten. Das allein kann den FCP auf textlastigen Seiten deutlich nach vorne holen, weil der Text nicht mehr auf den Download der Schrift wartet.

4. Die kritische Anfragekette verkürzen

Die Zahl der Ressourcen reduzieren, die der Browser vor dem Rendern laden muss. Zu kritischen Origins vorverbinden, die wenigen für den ersten Farbauftrag nötigen Ressourcen vorladen und die initiale HTML schlank halten, damit der Browser schnell etwas Zeichenbares erreicht.

5. FCP in WordPress verbessern

In WordPress kommt ein langsamer FCP meist von rendernblockierenden Plugin- und Theme-Skripten sowie einer langsamen Serverantwort. Ein Caching-Plugin, das die Serverantwort beschleunigt und unkritische Skripte verzögert, ein schlankes Theme und das Vorladen der wichtigsten Schrift bringen die meiste Wirkung. Nach den Änderungen testen, weil zu aggressives Verzögern von Skripten interaktive Elemente stören kann.

FCP prüfen und verifizieren

PageSpeed Insights erneut ausführen und prüfen, ob der Labor-FCP gesunken ist, dann die Felddaten im Chrome UX Report über das nachlaufende 28-Tage-Fenster beobachten. Auf einem Mittelklasse-Smartphone mit Drosselung testen, weil sich ein schlechter FCP dort zeigt, und mehrere Seitentypen prüfen, da ein gecachter Artikel und eine ungecachte Landingpage sehr unterschiedlich schnell zu rendern beginnen. Wie bei den anderen Kennzahlen werden die Felddaten pro URL ausgewiesen, sofern eine Seite genug Verkehr hat, sonst als Origin-Durchschnitt.

Häufige Fragen

Was ist ein guter FCP-Wert?

1,8 Sekunden oder schneller am 75. Perzentil der realen Nutzer gilt als gut. Zwischen 1,8 und 3 Sekunden ist verbesserungswürdig, mehr als 3 Sekunden ist schlecht.

Was ist der Unterschied zwischen FCP und LCP?

First Contentful Paint markiert, wann der erste Inhalt beliebiger Art erscheint. Largest Contentful Paint markiert, wann das größte, bedeutsamste Element erscheint. FCP zeigt, dass das Rendern begonnen hat, LCP, dass der Hauptinhalt bereit ist.

Ist FCP ein Core Web Vital?

Nein. FCP ist eine diagnostische Ladekennzahl, keine der drei Core Web Vitals, und damit kein direktes Ranking-Signal. Da FCP dieselben Ursachen wie LCP teilt, hilft eine FCP-Verbesserung meist auch dem LCP.

Wie verbessere ich den FCP?

Server-Antwortzeit senken, rendernblockierende Ressourcen entfernen, mit font-display: swap Text sofort zeigen und die kritische Anfragekette mit Vorverbinden und Vorladen verkürzen.

Wie wird FCP gemessen?

FCP erscheint in Laborwerkzeugen wie Lighthouse und in den Felddaten des Chrome UX Report. Im Browser lässt er sich über die Paint-Timing-API auslesen, indem man den Eintrag first-contentful-paint beobachtet.

Warum unterscheidet sich FCP im Labor und im Feld?

Labordaten stammen aus einem einzelnen kontrollierten Test, Felddaten aus einer Bandbreite realer Geräte und Verbindungen über 28 Tage. Google nutzt die Felddaten, die Labordaten dienen der Fehlersuche.