Mit dem First Contentful Paint (FCP) wird gemessen, wann das erste Element einer Website im Browser angezeigt wird. Wir zeigen Ihnen, was Sie beachten müssen, wenn Sie den First Contentful Paint Ihrer Website optimieren möchten. Mehr zum Thema Website Speed Test in unserem großen Übersichtsartikel.
Was ist der First Contentful Paint (FCP)?
Der First Contentful Paint, kurz FCP, ist ein Messwert für die Ladegeschwindigkeit einer Website (auch Page Speed genannt). Dabei wird der Zeitpunkt gemessen, an dem im Browser zum ersten Mal ein Darstellungselement angezeigt wird.
Was wird mit dem First Contentful Paint gemessen?
Damit dies geschehen kann, müssen zuvor eine Verbindung zwischen Browser und Webserver hergestellt werden und die Seiteninhalte bis zu einem bestimmten Punkt heruntergeladen werden. Dazu gehören CSS- und Javascript-Dateien, der HTML-Quelltext und Fonts sowie Bilder und Videos.
Der FCP ist für die Psychologie des Nutzers besonders wichtig, da ab diesem Punkt kein weißer Bildschirm mehr zu sehen ist. So bekommt er die positive Rückmeldung, dass die Webseite erreichbar ist und geladen werden kann. Dies leistet seiner Geduld beim weiteren Ladevorgang einen wichtigen Aufschub und hilft, die Bounce Rate zu senken.
In dem Messtool PageSpeed Insights von Google wird der First Contentful Paint als "Erste Inhalte gezeichnet" angezeigt und in Screenshots unterhalb der Messwerte wiedergegeben. Der FCP ist hier sogar die erste Mess-Station, der TTFB wird nicht angezeigt.
Wodurch wird der First Contentful Paint verzögert?
- Große Datenmengen
- Langsame Datenübertragung
- Daten werden nicht aus einem Cache angefordert
Mit welchen Tools kann man den FCP messen?
- PageSpeed Insights: Im Ergebnis als "Erste Inhalte gezeichnet" gekennzeichnet
- Test My Site: Die angegebene Seitenladezeit ist der FCP (dieser kann von dem Ergebnis in PageSpeed Insights abweichen, da eine andere Datengrundlage gewählt wird)
- WebPageTest: Im Ergebnis als "First Contentful Paint" gekennzeichnet
- Dareboost: Im Ergebnis als "Start Render" gekennzeichnet
First Contentful Paint richtig optimieren
Je größer die Daten sind, die vom Webserver geladen werden müssen, desto langsamer zieht sich der Seitenaufbau hin. Für die ersten Seiteninhalte ist dabei besonders wichtig, dass Stylesheets und Skripte schnell geladen werden. Der Browser blockt nämlich das Rendering der Webseite, bis diese interpretiert sind.
Wie kann man den First Contentful Paint optimieren?
Da der First Contentful Paint zeitlich nach dem Time To First Byte gemessen wird, ist es sinnvoll, zunächst zu schauen, ob dieser optimiert werden kann. Hierzu haben wir bereits einen Ratgeber geschrieben.
Um die Datenmenge zu verkleinern bieten sich verschiedene Methoden an. Zum einen werden CSS und JavaScript oft in großen Bibliotheken zur Verfügung gestellt, deren voller Funktionsumfang von der Webseite gar nicht genutzt wird. Die nicht benötigten Funktionen können daher gelöscht werden. Zum anderen können durch Skripte und Programme die Leerzeichen, Umbrüche und Tabulatoren aus dem Quellcode entfernt werden, was die Dateien zusätzlich verkleinert.
Der Webserver ist zudem in der Lage, ausgehende Dateien durch Algorithmen wie “GZIP” oder “Brotli” zu komprimieren. Wird die Einstellung vorgenommen, müssen die Datenpakete im Browser entpackt werden, was aber in der Regel von allen modernen Browsern unterstützt wird.
Der Render-Block kann für CSS-Dateien durch die Festlegung von sogenannten Viewports noch schneller aufgehoben werden. Viewports bezeichnen das Ausgabemedium, also beispielsweise Smartphone, Tablet oder Desktop-Rechner. Wird der Browser so angeleitet, muss er nicht erst alle Daten für die anderen Viewports laden, bevor er mit dem Rendern beginnen kann.
Für eine schnellere Datenübertragung durch persistente Verbindungen kann das Protokoll HTTP/2 (auch H2 genannt) im Webserver aktiviert werden. Die Voraussetzung dafür ist ein SSL-Zertifikat.
Damit nicht alle Seiteninhalte beim erneuten Laden der Webseite oder einer Unterseite mit ähnlichen Inhalten erneut vom Webserver angefordert werden müssen, kann man durch HTTP-Caching bestimmen, wie lange bestimmte Elemente auf dem Rechner des Nutzers zwischengespeichert werden sollen.
Zusammenfassung: Maßnahmen zur FCP Optimierung
- Maßnahmen zur Optimierung des Time To First Byte
- CSS und JavaScript verkleinern und minifizieren
- Dateien vom Webserver komprimieren lassen
- Viewports in CSS definieren
- HTTP/2 aktivieren
- Caching aktivieren
Weitere Mess-Stationen für den Page Speed
Der First Contentful Paint ist nur eine der vielen Mess-Stationen, an denen der Page Speed gemessen werden kann. Im Verbund mit weiteren gewonnenen Messwerten lassen sich Schwachstellen und Flaschenhälse identifizieren und gezielt optimieren. Dazu haben wir auch einen umfangreichen Ratgeber im Ryte Magazine veröffentlicht.
Die vier wichtigsten Page Speed Mess-Stationen
- Time to First Byte (TTFB): Der Zeitraum zwischen dem Aufruf der Website und dem ersten vom Webserver geladenen Byte
- First Contentful Paint (FCP): Der Zeitpunkt, an dem im Browser zum ersten Mal ein Darstellungselement angezeigt wird
- First Meaningful Paint (FMP): Der Zeitpunkt, an dem der Nutzer das Gefühl hat, dass die Website geladen ist
- Time to Interactive (TTI): Der Zeitpunkt, an dem die Website fertig gerendert und bereit zur Nutzereingabe ist
Optimierungspotenzial Ihrer Website analysieren
Mit dem wao.io Analyzer finden Sie heraus, wo das Optimierungspotenzial Ihrer Website liegt.
Jetzt Website analysieren
