First Contentful Paint, kurz FCP, misst, wann nach dem Start eines Seitenaufrufs erstmals tatsächlicher Inhalt im Browser erscheint. Das können beispielsweise Text, ein Bild oder eine gezeichnete Grafik sein.
Was misst der First Contentful Paint?
Beim Laden einer Website vergeht Zeit, bevor der Browser etwas Sinnvolles anzeigen kann. Der FCP erfasst den Zeitpunkt, an dem erstmals Inhalt aus dem Dokument gerendert wird.
Dazu zählen unter anderem Text, Bilder, Hintergrundbilder, gezeichnete Canvas-Inhalte und nicht leere SVG-Grafiken. Inhalte innerhalb eines iFrames werden für den FCP der übergeordneten Seite nicht berücksichtigt.
Der Messwert beantwortet damit vereinfacht die Frage: Wann merkt die Person vor dem Bildschirm erstmals, dass tatsächlich Seiteninhalt geladen wird?
Was ist ein guter FCP-Wert?
Google empfiehlt einen First Contentful Paint von höchstens 1,8 Sekunden. Werte über 3 Sekunden gelten nach der Einteilung von web.dev als langsam. Für eine aussagekräftige Bewertung wird das 75. Perzentil der Seitenaufrufe betrachtet und zwischen mobilen Geräten und Desktop-Geräten unterschieden.
Das bedeutet: Ein einzelner schneller Test reicht nicht aus, um die tatsächliche Erfahrung aller Besucherinnen und Besucher zu beurteilen. Gerät, Netzwerkverbindung und Standort können die Ladezeit stark beeinflussen.
Unterschied zwischen FCP und LCP
FCP misst den ersten sichtbaren inhaltlichen Fortschritt. Largest Contentful Paint, kurz LCP, betrachtet dagegen das größte relevante Bild beziehungsweise den größten Textblock im sichtbaren Bereich.
Eine Seite kann daher einen schnellen FCP und trotzdem einen langsamen LCP haben. Das passiert zum Beispiel, wenn zuerst eine kleine Überschrift erscheint, ein großes Titelbild aber erst deutlich später geladen wird.
Was kann den FCP verschlechtern?
Ein langsamer Server kann dafür sorgen, dass der Browser lange auf das HTML-Dokument wartet. Auch große CSS-Dateien, synchron ausgeführtes JavaScript, Webfonts und andere render-blockierende Ressourcen können die erste sichtbare Darstellung verzögern.
Eine Optimierung beginnt deshalb häufig bei Serverantwortzeit, Dateigrößen und der Reihenfolge, in der wichtige Ressourcen geladen werden.
Wie wird FCP gemessen?
FCP lässt sich sowohl unter kontrollierten Testbedingungen als auch mit Daten echter Seitenaufrufe erfassen. web.dev nennt unter anderem Chrome User Experience Report, PageSpeed Insights und Chrome DevTools als geeignete Quellen beziehungsweise Werkzeuge.
Testdaten helfen Dir beim Debugging. Felddaten zeigen dagegen, wie sich die Website unter den unterschiedlichen Bedingungen echter Nutzerinnen und Nutzer verhält.
Häufige Fragen
Was bedeutet First Contentful Paint?
First Contentful Paint misst die Zeit bis der Browser erstmals tatsächlichen Seiteninhalt wie Text oder ein Bild sichtbar darstellt.
Welcher FCP-Wert ist gut?
Als guter First Contentful Paint gilt ein Wert von höchstens 1,8 Sekunden. Für die Bewertung sollte vor allem die Erfahrung echter Seitenaufrufe betrachtet werden.
Was ist der Unterschied zwischen FCP und LCP?
FCP misst den ersten sichtbaren Inhalt. LCP misst dagegen, wann das größte relevante Inhaltselement im sichtbaren Bereich dargestellt wurde.
