Page Speed: „First Contentful Paint“ richtig optimieren

Schnelligkeit zählt - First Contentful Paint

Die Ladezeit einer Webseite lässt sich an vielen Stationen messen. Für die Geduld des Nutzers ist wichtig, dass erste Seiteninhalte so früh wie möglich geladen werden. Diesen Zeitpunkt nennt man den First Contentful Paint und wie man ihn richtig optimiert, lesen Sie hier.

Wenn Sie Ihre Webseite einem Page-Speed-Test unterziehen (z.B. mit PageSpeed Insights), werden Sie feststellen, dass Sie mehr als nur ein Ergebnis erhalten. Das kann auf den ersten Blick verwirrend sein. Daher stellen wir in dieser Serie die wichtigsten Page-Speed-Messwerte vor:

  • 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.

In diesem Artikel dreht sich alles um den First Contentful Paint, für einen vollständigen Überblick empfehlen wir zusätzlich den Gastartikel von Sevenval-CTO Roland Guelle im Ryte Magazine.

Page Speed: FCP – First Contentful Paint

Der First Contentful Paint, zu deutsch: “Erste Inhalte gezeichnet”, wird gemessen, wenn der Browser so viele Daten der Webseite zur Verfügung hat, dass er ein erstes Seitenelement auf dem Bildschirm darstellen kann.

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.

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.

PageSpeed Insights Ergebnis

Den First Contentful Paint 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.

Hier unsere Tipps für einen schnelleren FCP:

  1. CSS und JavaScript verkleinern und minifizieren
    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.
  2. Dateien vom Webserver komprimieren lassen
    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.
  3. Viewports in CSS definieren
    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.
  4. HTTP/2 aktivieren
    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.
  5. Caching aktivieren
    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.

First Contentful Paint automatisiert optimieren

Der Cloud-Service wao.io optimiert den First Contentful Paint Ihrer Webseite kontinuierlich und auf dem aktuellsten technologischen Stand. Dazu muss keine Änderung am Code vorgenommen werden.

Mit dem wao.io Analyzer können Sie unverbindlich testen, wo das Einsparungspotential Ihrer Webseite liegt.

Jetzt Whitepaper anfordern

In unserem Whitepaper zeigen wir, warum schnelle Seitenladezeiten mehr Traffic und Verkäufe generieren. Nutzen auch Sie das volle Potenzial Ihres Shops!

Blog Banner Whitepaper Ladezeiten

Zur Blog-Startseite