First Contentful Paint - Wie schnell sehen Deine Nutzer erste Seitenelemente?

Der First Contentful Paint (FCP) ist eine der wichtigsten Metriken in Sachen Web Performance. Er gibt dem User nämlich visuelles Feedback darüber, ob eine Website geladen wird oder nicht.

Inhaltsverzeichnis

  1. Was ist der First Contentful Paint?
  2. Wie beschleunige ich den First Contentful Paint?
  3. Wo finde ich weitere Informationen?

Was ist der First Contentful Paint?

Alle Elemente, die der Nutzer später auf seinem Bildschirm sieht, werden im sogenannten Document Object Model (DOM) gespeichert. Bei jeder Seitenanfrage geht das DOM die enthaltenen Objekte durch und rendert diese. Der First Contentful Paint ist dabei die Zeit, die zwischen dem Aufruf der Webseite durch den User bis zum ersten gerenderten Element aus dem DOM verstreicht.

Je langsamer dies geschieht, desto länger starren Deine User auf einen weißen Bildschirm. Selbst wenn der Folgeinhalt danach schneller geladen wird, bleibt der subjektive Eindruck einer langsamen Website zurück. Den First Contentful Paint zu beschleunigen, ist daher eines der effektivsten Ziele, um Deinen Pagespeed zu steigern.

Auswertung und Anzeige des First Contentful Paint

Wie beschleunige ich den First Contentful Paint?

Um Deinen Besuchern schneller die ersten Elemente einer Seite anzuzeigen, solltest Du vor allem die Ladezeiten für Seitenressourcen reduzieren. Außerdem kannst Du Dir anschauen, welche Prozesse zu Ladebeginn ausgeführt werden, die das Rendern des DOMs blockieren könnten. Folgende vier Schritte können den First Contentful Paint am effektivsten reduzieren:

  1. Minimiere die Downloadgröße von textbasierten Ressourcen. Dies können zum Beispiel JavaScript- oder CSS-Dateien sein, die zum Seitenaufruf geladen werden, um DOM-Inhalte darzustellen. Dies erreichst Du, indem Du den Code in den Dateien entweder minimierst oder diese komprimierst. Wie Du zum Beispiel die Downloadgröße von JavaScript reduzierst, erklären wir Dir in unserem Artikel zur JavaScript Bootup-Time.
  2. Wo wir gerade bei JavaScript sind: Wenn der Browser zu Beginn der Ladezeit das komplette JavaScript Deiner Website interpretieren muss, obwohl nicht alle Funktionen und Referenzen benötigt werden, verlangsamt dies den First Contentful Paint ebenfalls. Dem kannst Du mit zwei Techniken entgegenwirken: dem Tree Shaking und dem Code Splitting.

    Beim Tree Shaking durchforstest Du Deine Codebase nach nicht mehr benötigten Programmzeilen oder Abhängigkeiten. Gerade bei älteren Applikationen wirst Du überrascht sein, wieviel "toter" Code sich mit der Zeit ansammelt.

    Beim Code Splitting teilst Du Deinen JavaScript-Code in mehrere kleine Häppchen auf. Schaue zum Beispiel, dass Du Features, die Du nicht direkt beim ersten Laden der Webseite benötigst, in eine separate Datei auslagerst. Je weniger JavaScript der Browser beim Aufruf durch den User verarbeiten muss, desto besser für den Pagespeed.

  3. Nutze HTTP-Caching, um die Nutzererfahrung für wiederkehrende Besucher zu beschleunigen. Bei jeder Browseranfrage prüft der Server, ob die angefragten Dateien vorhanden sind und stellt diese zum Download bereit. Richtest Du einen Cache ein, legst Du bereits geladene Dateien für Deine User in einem Puffer ab. Dies reduziert die Antwortzeit des Servers und erhöht die Geschwindigkeit Deiner Website.

    Zahlreiche Hosting-Anbieter stellen in ihren Paketen Cache-Lösungen bereit, die Du nur noch aktivieren musst. Nutzt Du Wordpress als Content Management System, kannst Du hierfür ein Plugin wie zum Beispiel WP Super Cache nutzen.

  4. Reduziere die Anzahl externer Scripte und Stylesheets, die das Rendern blockieren könnten. Bevor das DOM gerendert wird, verarbeitet der Browser beispielsweise zunächst sämtliche CSS-Dateien. Erst wenn die Stylesheets heruntergeladen und ausgelesen wurden, wird die Website für den User dargestellt. Sorge also dafür, dass Du nicht zu viele CSS-Dateien nutzt und deren Codebase schlank hältst.

Wo finde ich weitere Informationen?

Speedrank Superhero Maskottchen

Führe Deine Webseiten zum Erfolg

Jetzt kostenfrei Performance analysieren

Mit Deiner Anmeldung akzeptierst Du unsere AGB.

  • 14 Tage lang ausgiebig testen. Läuft automatisch aus.
  • Keine Kündigung erforderlich!
  • Kein Passwort notwendig.
  • In nur wenigen Sekunden die erste Auswertung sehen.