First Contentful Paint (FCP)

First Contentful Paint (FCP) ist eine Metrik, die die Zeit vom Beginn des Seitenladens bis zu dem Punkt misst, an dem der Browser das erste Stück Inhalt auf der Seite rendert.

Die FCP-Metrik: erstes Darstellen von Inhalten auf der Seite.

Es handelt sich also um eine Metrik des ersten Renderings und liegt zeitlich zwischen der Backend-Zeit (TTFB-Metrik) und der Ladezeit des größten Elements (LCP-Metrik). Im Gegensatz zu diesen Metriken ist FCP jedoch kein Bestandteil der Core Web Vitals.

Für die FCP-Metrik versteht man unter „Inhalt“ Text, Bilder (einschließlich CSS-Hintergrundbilder), <svg>-Elemente oder andere als weiße <canvas>-Elemente.

Warum ist FCP wichtig?#

Die Messung von FCP ist wichtig, weil das erste Darstellen von Inhalten auf der Seite den ersten Eindruck des Nutzers von der Geschwindigkeit der Website beeinflusst.

Ein schnelles FCP signalisiert, dass die Website funktioniert und bald mit dem erwarteten Inhalt beginnt, was die Nutzerzufriedenheit erhöht und sich positiv auf das SEO​ auswirken kann.

Was sind die idealen FCP-Werte?#

Der ideale FCP-Wert liegt unter 1,8 Sekunden.

Wir empfehlen, den FCP-Wert so niedrig wie möglich zu halten, idealerweise unter 1,8 Sekunden auf allen Seitentypen für Mobilgeräte und Desktops. Diese Empfehlung kommt auch von Google.

Wie können Sie FCP messen?#

Es gibt mehrere Wege, um die FCP-Metrik für Ihre Website oder eine bestimmte Seite zu erhalten.

Chrome-Erweiterung „Web Vitals“#

Mit dem Add-on direkt im Browser können Sie den FCP-Wert für einzelne Seiten Ihrer Website ermitteln. In der Konsole können Sie dann mehr Informationen finden, auf welche Teile von FCP Sie sich bei einer eventuellen Optimierung konzentrieren sollten. Großteils beeinflusst FCP die Geschwindigkeit des Backends (Metrik TTFB).

Die Web Vitals-Erweiterung gibt in der Browser-Konsole verschiedene detaillierte Informationen zurück.

Lesen Sie mehr über das Messen der Geschwindigkeit direkt im Browser.

Daten von Google-Nutzern (CrUX)#

Mit unserem Web-Geschwindigkeitstest oder dem PageSpeed Insights-Tool können Sie den FCP-Wert für jede URL einzeln ermitteln oder Daten für die gesamte Domain erhalten.

PageSpeed.ONE Monitoring#

Im PLUS-Monitoring zeigen wir nicht nur den aktuellen FCP-Wert für einzelne URLs oder die gesamte Domain, sondern können auch mit einem Diagramm veranschaulichen, wie sich die Metrik historisch verändert hat.

FCP-Metrik bei pagespeed.one.

Wir verfügen über Daten sowohl von Nutzern (CrUX) als auch aus synthetischen Messungen (synth). (Siehe verschiedene Arten der Web-Geschwindigkeitsmessung.)

Mit dem Watchdog zeigen wir die kontinuierliche tägliche Entwicklung des synthetischen FCP-Wertes sowie anderer Metriken und senden Benachrichtigungen.

Wie FCP optimieren#

Die Optimierung der FCP-Metrik umfasst mehrere wichtige Schritte. Es ist immer notwendig, von den Daten der Messinstrumente auszugehen. Lassen Sie uns einige der üblichen Möglichkeiten zur Verbesserung von FCP aufzeigen.

Verkürzen Sie die Serverantwortzeit#

Optimieren Sie das Backend (Metrik TTFB) für ein schnelleres Herunterladen und Verarbeiten des HTML-Dokuments. Je schneller der Browser das HTML-Dokument verarbeiten kann, desto früher beginnen kritische Ressourcen für das erste Darstellen von Inhalten auf der Seite herunterzuladen und zu verarbeiten.

Minimieren Sie render-blockierende Ressourcen#

Reduzieren Sie die Anzahl und die Gesamtgröße von CSS-Dateien, Web-Fonts und JavaScript-Dateien, die für das Rendern des ersten Inhalts erforderlich sind.

Teilen Sie CSS in kleinere Teile. Laden Sie auf der Seite idealerweise nur die CSS-Stile, die benötigt werden.

Wenn das Rendern des ersten Inhalts der Website nicht von JavaScript abhängt (bei Frameworks wie Nuxt.js, Vue.js, React, Next.js usw.), verarbeiten Sie alle JavaScript-Dateien asynchron.

Verwenden Sie so wenige Schnitte und Arten von Web-Fonts wie möglich. Verwenden Sie die CSS-Eigenschaft font-display:swap, um alternative Schriften vor dem Laden der Hauptschriftarten anzuzeigen.

Nutzen Sie Server-Side Rendering (SSR)#

Wenn Ihre Website eines der JavaScript-Frameworks verwendet, stellen Sie sicher, dass der erste Inhalt bereits im Basis-HTML-Dokument enthalten ist. So müssen Sie nicht auf das Herunterladen und Verarbeiten von JavaScript warten.

Verwenden Sie Lazy Loading zum Verzögern des Ladens nicht-essentieller Ressourcen#

Verzögern Sie das Laden von Bildern oder JavaScript-Dateien für Elemente, die im ersten Viewport nicht sichtbar sind. Für Bilder verwenden Sie Lazyloading.

Für ein tieferes Verständnis dieser Optimierungstechniken empfehlen wir, verfügbare Tools und Anleitungen wie auf web.dev zu erkunden, die konkrete Ratschläge und Verfahren zur Verbesserung der FCP-Metrik bieten.