First Contentful Paint

Im folgenden Beitrag dreht sich alles um den First Contentful Paint. Hierfür klären wir was der FCP ist, was seine Bedeutung für die Suchmaschine ist und wie er gemessen bzw. optimiert werden kann.

Angaben PageSpeed Insights
Angaben bei PageSpeed Insights

Was ist der First Conentful Paint (FCP)?

Bei dem sogenannten First Contentful Paint handelt es sich, um den Zeitpunkt, wann das erste Element Deiner Website dem Nutzer angezeigt wird. Dabei ist es unerheblich, ob es sich beim ersten Element um ein Bild oder Text handelt.

Was ist First Contentful Paint (auf Englisch)

Bedeutung für die Suchmaschinenoptimierung

Google und andere Suchmaschinen legen immer mehr Wert auf die Ladezeit Deiner Website. Heutzutage zählt jene mitunter zu den wohl wichtigsten Faktoren für das Ranking in den Suchmaschinen. Die Google Search Console gibt preis, dass 3 Sekunden + bereits als kritischer Wert gelten. Das straft nicht nur die Suchmaschine, denn auch der Nutzer, der sich auf Deiner Website aufhält, springt wahrscheinlicher ab, wenn sie länger zum Laden benötigt. Die Bounce Rate bei 3 Sekunden beträgt bereits knapp 50%, demnach springt jeder zweite Besucher ab.

First Contentful Paint – Google PageSpeed Insights

Damit Du Google & Co. nicht chancenlos ausgeliefert bist, hat Google das Tool PageSpeed Insights entwickelt, welches Dir die Möglichkeit gibt die Ladezeit Deiner Website zu messen und sie folglich auch zu optimieren. Dabei handelt es sich um eine Skala von 0-100, der Deine Website zugeordnet wird. Durch die genaue Analyse Deiner Website gibt Dir Google PageSpeed Verbesserungsvorschläge und Tipps Deine Website zu optimieren.

Wodurch wird die Ladezeit Deiner Website bestimmt?

Grundsätzlich ist eine Vielzahl an Metriken für die Ladezeit Deiner Website verantwortlich.

  • Beispielsweise spielt die Performance Deines Servers aber auch das Zusammenspiel von Server und Website eine große Rolle für die Ladezeit.
  • Darüber hinaus ist aber auch das Endgerät über welches Du die Website aufrufst ebenso Teil der Performance.
  • Nicht zuletzt fließt auch der Inhalt Deiner Seite (Textlänge, Bildgröße, …) als Qualitätsfaktor mit ein.

Das bedeutet konkret für Dich, dass Du dafür sorgen musst, dass Deine Datenübertragung beschleunigt wird und Du wenig große Datenmengen wie Bilder und Videos hast bzw. jene in komprimierter Form hochlädst.

Messung des First Contentful Paint

Von der Messung des FCP sprechen wir dann, wenn die ersten Javascript- und CSS-Dateien, Fonts, Bilder und der HTML-Quelltext gelesen wurden und der Bildschirm des Seitenbesuchers nicht mehr völlig weiß ist. Deswegen heißt FCP auf Deutsch übersetzt „Erste Inhalt gezeichnet“.

Zur Messung herangezogene Tools

Ein Tool durftest Du bereits kennenlernen – PageSpeed Insights von Google. Darüber hinaus gibt es auch weitere Tools, wie WebPageTest, Pingdom, GTMetrix, … Allerdings musst Du dabei stets beachten, dass die jeweiligen Tools für die Datenauswertung unterschiedliche Bemessungsgrundlagen verwenden. Demnach können die Ergebnisse leicht voneinander abweichen.

gtmetrix first contentful paint time
GtMetrix Erklärung FCP

Ladegeschwindigkeit der Website mit Paint- & User-Timings messen

Dabei handelt es sich um eine Art Ergänzung bzw. Besicherung von PageSpeed Insights. Der Hintergrund hierfür ist folgender; Eine einzelne Zahl 0-100 kann nicht genügend Feedback bezüglich der Ladezeit Deiner Website liefern. Vor allem gibt es eine Vielzahl an Faktoren, die Du als Seitenbetreiber nicht kontrollieren kannst – Facebook Pixel, Serverleistung, …

Die wichtigsten Mess-Stationen für den PageSpeed

Neben dem FCP gibt es noch drei weitere Mess-Stationen, die für die Performance Deiner Website relevant sind. Dabei handelt es sich um einen Mehrstufigen Prozess, bis Deine Website vollständig geladen und nutzbar ist:

  1. First Meaningful Paint: Das ist der Zeitpunkt, an dem Nutzer das Gefühl hat bzw. haben sollte, dass die Website vollständig geladen ist.
  2. Time to First Byte: Damit ist der Zeitraum gemeint, zwischen dem Aufruf Deiner Website und dem ersten vom Server vollständig geladenen Byte.
  3. Time to Interactive: Damit ist jener Zeitpunkt gemein, an welchem die Website vollständig geladen und bereit zur Benutzung ist.
Unbenannt
Pagespeed Messung von Lightweb-media.de

Gute Werte für den FCP

Um Deinen Website Besuchern die ideale Customer-Experience bieten zu können, solltest Du bestrebt sein, einen FCP-Wert von maximal 1 Sekunde zu haben. Dein Gesamtscore sollte sowohl für Mobilgeräte als auch für den Desktop den Skalenwert von 75 nicht unterschreiten.

Website-Optimierung für den FCP

Hierfür musst Du zuerst das Optimierungspotenzial Deiner Website analysieren. Das kannst Du mit PageSpeed Insights oder dem umfangreicheren Tool von Google „Lighthouse“ durchführen. Es gibt grundsätzlich drei Farben, die das Ergebnis der Analyse annehmen kann – rot, orange, grün.

image

Demnach; je niedriger der FCP, desto schneller lädt Deine Website und desto mehr Punkte bekommst Du.

Das Aufscheinen der ersten Seiteninhalte richtet sich maßgeblich danach, wie schnell das Stylesheet und die Skripte Deiner Website geladen werden. Es ist also wichtig eine möglichst kleine Datenmenge im Quellcode zu haben. Hierfür kannst Du nicht benötigte Funktionen, Leerzeichen, Umbrüche und Tabulatoren, die sich negativ auf Deine Ladezeit auswirken entfernen.

Doch Achtung: blindes Löschen von Code – vor allem, wenn Du mit Codieren und dergleichen noch unerfahren bist, raten wir Dir ab, da Du unter Umständen Code löschen kannst, welcher für Deine Website mehr als notwendig und relevant ist. Hierfür wende Dich lieber an Profis wie uns.

Darüber hinaus kannst Du jedoch kleine Optimierungen wie beispielsweise das Komprimieren von Bildern jederzeit selbst durchführen. Hierfür eignet sich das Tool Squoosh oder tinypng. Durch simples Drag-and-Drop kannst Du schwere Bilder einfügen und das Tool komprimiert sie Dir auf bis zu 99% kleiner.

Neben den vorgestellten Optimierungsmöglichkeiten empfehlen wir ohnehin auch eine http/2 Verbindung. Das wirkt sich zudem auch gleich mehrfach positiv auf Dein Google Ranking aus. Eine saubere http/2 Verbindung sorgt für eine schnellere Datenübertragung. Die Voraussetzung hierfür ist ein SSL-Zertifikat. Da wir schon bei http-Verbindungen sind, empfehlen wir auch ein http-Caching. Damit kannst Du bestimmen, wie lange die jeweiligen Elemente und Inhalte auf dem Gerät Deines Website-Besuchers zwischengespeichert bleiben sollen.

Hinterlasse eine Anmerkung