First Contentful Paint (FCP) ist eine Performance-Metrik, die misst, wie viel Zeit zwischen dem Aufruf einer Seite und dem ersten sichtbar gerenderten Inhalt vergeht. Als Inhalt zählen Text, Bilder (auch Hintergrundbilder), SVG-Elemente und nicht weiße Canvas-Elemente.
Auf einen Blick
- Messwerte
- FCP (First Contentful Paint)
- Misst
- Zeit von der Navigation bis zum ersten gerenderten Inhalt
- Datenquelle
- Felddaten (u. a. CrUX) und Labordaten (Lighthouse)
- Grenze „gut“
- bis 1,8 s
- Bewertung
- 75. Perzentil der Seitenaufrufe
Stand:
Schwellenwerte
Laut web.dev gilt ein FCP bis 1,8 Sekunden als gut, zwischen 1,8 und 3,0 Sekunden als verbesserungswürdig und darüber als schlecht. Bewertet wird das 75. Perzentil der Seitenaufrufe.
Bewertet wird das 75. Perzentil der Seitenaufrufe, Mobil und Desktop getrennt. Quelle: web.dev: First Contentful Paint (FCP). Stand: .
| Messwert | Misst | Core Web Vital? | Feld oder Labor | „Gut“ laut web.dev |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Renderzeit des größten sichtbaren Bilds, Textblocks oder Videos im Viewport, ab Beginn der Navigation | ja (Laden) | Feld und Labor | bis 2,5 s |
| INP (Interaction to Next Paint) | Latenz der Interaktionen während des gesamten Besuchs bis zur nächsten Darstellung; ein Wert, unter dem (fast) alle Interaktionen liegen | ja (Interaktivität), seit 12.03.2024 | Feld; im Labor nur mit simulierten Interaktionen, Lighthouse misst INP nicht | bis 200 ms |
| CLS (Cumulative Layout Shift) | größte Folge unerwarteter Layoutverschiebungen während der gesamten Lebensdauer der Seite | ja (visuelle Stabilität) | Feld und Labor | bis 0,1 |
| TTFB (Time to First Byte) | Zeit vom Beginn der Navigation bis zum ersten Byte der Antwort | nein (hilft bei der Diagnose von LCP) | Feld und Labor | bis 0,8 s |
| FCP (First Contentful Paint) (dieser Begriff) | Zeit vom Beginn der Navigation, bis irgendein Inhalt der Seite dargestellt wird | nein (hilft bei der Diagnose von LCP) | Feld und Labor | bis 1,8 s |
| TBT (Total Blocking Time) | Summe der Zeit nach dem FCP, in der der Hauptthread so lange blockiert war, dass Eingaben nicht reagieren konnten | nein (Labor-Stellvertreter für INP) | Labor; Feldmessung empfiehlt web.dev nicht | unter 200 ms auf durchschnittlicher mobiler Hardware |
| Speed Index | wie schnell Inhalte beim Laden sichtbar aufgebaut werden (aus einem Video des Ladevorgangs) | nein | Labor (Lighthouse) | Schwelle laut Lighthouse: mobil bis 3,4 s „schnell“ (web.dev nennt keinen Wert) |
| FID (First Input Delay), historisch | Zeit von der ersten Interaktion bis der Browser mit der Verarbeitung der Event-Handler beginnen kann | bis 12.03.2024, ersetzt durch INP | nur Feld | bis 100 ms |
Bewertet wird laut web.dev das 75. Perzentil der Seitenaufrufe, Mobil und Desktop getrennt. Eine Seite besteht die Core Web Vitals, wenn LCP, INP und CLS am 75. Perzentil im Bereich „gut“ liegen. Chrome-Tools unterstützen FID seit dem 9. September 2024 nicht mehr. Quellen: web.dev: Web Vitals; web.dev: Largest Contentful Paint (LCP); web.dev: Interaction to Next Paint (INP); web.dev: Cumulative Layout Shift (CLS); web.dev: Time to First Byte (TTFB); web.dev: First Contentful Paint (FCP); web.dev: Total Blocking Time (TBT); web.dev: First Input Delay (FID); web.dev Blog: Interaction to Next Paint is officially a Core Web Vital (2024-03-12); Chrome for Developers: Lighthouse – Speed Index. Stand: .
Einordnung
FCP gehört nicht zu den Core Web Vitals. Das sind LCP, INP und CLS. web.dev beschreibt FCP als wichtigen Teil des Ladeerlebnisses, der hilft, Probleme beim LCP zu finden. Der LCP markiert den Zeitpunkt, an dem das größte Element im Sichtbereich fertig gerendert ist. Der FCP liegt davor.
Messen lässt sich FCP im Labor mit Lighthouse und den Chrome DevTools und im Feld mit dem Chrome User Experience Report, PageSpeed Insights und der Search Console.
Was den FCP verzögert
Laut web.dev enthält der FCP die Zeit für das Entladen der vorherigen Seite, den Verbindungsaufbau, Weiterleitungen und die Zeit bis zum ersten Byte (TTFB). Als Maßnahmen verweist web.dev unter anderem auf das Beseitigen von Ressourcen, die das Rendern blockieren.
Beispiel
In einem angenommenen Beispiel lädt eine Produktseite ein großes Stylesheet im <head>. Der Browser zeigt erst nach dem Download des Stylesheets etwas an, der FCP liegt bei 3,4 Sekunden. Ein kleiner, vorab eingebundener Teil der CSS-Regeln lässt den Text früher erscheinen.
Quellen
Stand: