Joel Burghardt 25. August 2021 5 Minuten Lesezeit

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.

First Contentful Paint Angaben PageSpeed Insights First Contentful Paint
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.

Info

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.

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, …

Info

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.

First Contentful Paint gtmetrix first contentful paint time First Contentful Paint
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.
First Contentful Paint Unbenannt First Contentful Paint
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.

First Contentful Paint image First Contentful Paint

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.

Hinweis

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.

Eine optimale Performance für WordPress bekommst Du mittels Plugins wie Cachify, Autoptimize oder WP-Rocket (kostenpflichtig). Abraten würden wir Dir von NitroPack, da dies derzeit sehr viele negative Schlagzeilen bekommt (Blogbeitrag dazu ausstehend).

Maßnahmen zur FCP Optimierung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Wir teilen unser Wissen insbesondere bei den Themen

GutenbergMarketingPagespeedSEOWebentwicklungWordpress