Technologische Neuigkeiten, Bewertungen und Tipps!

Was ist First Contenful Paint (FCP) und warum ist es wichtig?

Hinweis: Der folgende Artikel hilft Ihnen weiter: Was ist First Contenful Paint (FCP) und warum ist es wichtig?

Die Seitenladegeschwindigkeit ist eine der wichtigsten Messgrößen, die Google bei der Bewertung der Leistung einer Website verwendet, und eine Schlüsselkomponente seines Page-Experience-Algorithmus zur Bestimmung des Suchmaschinenrankings.

Allerdings kann die Durchsicht eines Page Speed ​​Insights- oder Lighthouse-Berichts aufgrund der schieren Anzahl an Fachbegriffen, die in diesen Analysen verwendet werden, überwältigend sein.

In diesem Blogbeitrag möchten wir eine der wichtigsten Kennzahlen aufschlüsseln, die Google in diesen beiden Berichten verwendet: Erste inhaltsreiche Farbe.

💡 In diesem Artikel:

Was ist First Contentful Paint?

Beitrag zu 10 % der Gesamtleistungsbewertung einer Website, Erste inhaltsreiche Farbe (FCP) ist eine wichtige Kennzahl, die Sie oder Ihr Webmaster berücksichtigen sollten, wenn Sie versuchen, die Seitengeschwindigkeit und das Benutzererlebnis Ihrer Website zu optimieren.

First Contentful Paint ist eine wichtige, benutzerzentrierte Metrik zur Messung der wahrgenommenen Ladegeschwindigkeit und markiert den ersten Punkt in der Seitenladezeitleiste, an dem der Benutzer alles auf dem Bildschirm sehen kann. Dies kann alles umfassen: Bilder, Text, Logos, Hintergrundgrafiken oder nicht weiße -Elemente

Ein schneller FCP trägt dazu bei, dem Benutzer die Gewissheit zu geben, dass etwas passiert.

Hier ist ein Beispiel von Google, wie Bilder und Textelemente auf dem Bildschirm geladen werden. Der Text, der im 2. Frame erscheint, ist der FCP.

First Contentful Paint unterscheidet sich von anderen ähnlich benannten Core Web Vitals wie Large Contentful Paint (LCP). LCP markiert den Punkt in der Seitenladezeitleiste, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde.

Was ist ein guter FCP-Score?

Laut Google verfügt eine gute Website über die Anzeige „First Contentful Paint“. 1,8 Sekunden oder weniger. Um sicherzustellen, dass eine Seite innerhalb dieses Zeitrahmens für Benutzer geladen wird, ist ein guter Schwellenwert anzustreben 75. Perzentil der Seitenladevorgängesegmentiert nach Mobilgeräten und Desktops.

Eine höhere Punktzahl zeigt an, dass der FCP auf einer Seite langsamer lädt, wohingegen eine niedrigere Punktzahl darauf hinweist, dass der FCP schnell lädt.

Das Bild unten zeigt den FCP für eine Website, die auf Page Speed ​​Insights ausgeführt wird:

Warum ist FCP wichtig?

FCP ist neben den folgenden anderen eine der sechs Kennzahlen, die im Lighthouse-Leistungsbericht von Google verwendet werden:

  1. Zeit für Interaktivität
  2. Geschwindigkeitsindex
  3. Gesamtblockierungszeit
  4. Größte inhaltsreiche Farbe
  5. Kumulative Layoutverschiebung

Alle diese Kennzahlen decken einen Aspekt der Seitenladegeschwindigkeit ab. FCP und damit auch die Seitenladegeschwindigkeit sind wichtige Faktoren für die Website-Leistung, da eine langsame Seitenladegeschwindigkeit dazu führen kann, dass ein Benutzer die Seite verlässt, bevor er konvertiert.

Eine von Google in Auftrag gegebene Studie aus dem Jahr 2019 durchgeführt von Deloitte bestätigt dies, da eine Verringerung der Ladezeiten mobiler Websites um nur eine Zehntelsekunde zu einem erheblichen Anstieg der Konversionsraten sowohl für Einzelhandels- (8,4 % Steigerung) als auch für Reise-Websites (10,1 % Steigerung) führte.

Auch wenn es wie Haarspalterei klingen mag, können kleine Verbesserungen der Seitenladegeschwindigkeit Ihrer Website auf lange Sicht einen großen Unterschied machen.

So testen Sie FCP

FCP kann auf zwei Arten gemessen werden. “Im Labor” bedeutet, dass Google Tools verwendet, um das Laden einer Seite in einer konsistenten, kontrollierten Umgebung zu simulieren. “Im Feld” Tests an echten Benutzern, die tatsächlich eine Seite laden und mit ihr interagieren.

Google empfiehlt die Verwendung beider Methoden, um eine gute Leistung sicherzustellen.

Im Labor:

Im Feld

Was verursacht langsame FCP-Ergebnisse?

Eine Vielzahl von Problemen kann zu langsamen FCP-Ergebnissen führen, darunter unter anderem:

  • Langsame Ladezeit für Schriftarten
  • Langsame Serverantwortzeiten (TTFB)
  • Hohe Anzahl von Anfragen und große Übertragungsgrößen
  • Renderblockierende Ressourcen
  • Ungenutztes oder ineffizientes CSS
  • Skriptbasierte Elemente über dem Falz
  • Lazy Loading über dem Falz
  • Bilder werden nicht über dem Falz eingefügt
  • Übermäßige DOM-Größe
  • Mehrere Seitenumleitungen

So verbessern Sie FCP

Sie können herausfinden, welche Verbesserungen Sie vornehmen müssen, um Ihren FCP zu verbessern, indem Sie den Abschnitt „Chancen und Diagnose“ des Lighthouse-Berichts lesen.

Das Bild unten ist ein Beispiel für die Arten von Empfehlungen, die Lighthouse auf einer bestimmten Website aussprechen kann:

Google bietet außerdem Best Practices zur Verbesserung Ihres FCP, darunter:

Wie bereits erwähnt, macht FCP nur etwa 10 % des Lighthouse-Leistungswerts aus und ist kein zentraler Web-Vital, wie es bei Largest Contentful Paint der Fall ist.

Laut Google, LCP macht 25 % der gesamten Lighthouse-Leistungsbewertung aus. Daher wäre es effizienter, Zeit in die Optimierung Ihres LCP oder Ihres Cumulative Layout Shift (CLS) zu investieren, da es sich bei beiden um Seitenerfahrungssignale handelt, die von Google zur Bestimmung des Seitenrangs verwendet werden.

Obwohl First Contentful Paint kein zentrales Web-Vital ist, handelt es sich dennoch um eine wichtige Benutzermetrik, mit der Probleme beim Ladeerlebnis diagnostiziert und behoben werden können verbunden mit zentralen Web-Vitalfunktionen wie zum Beispiel Largest Contentful Paint.

Die Behebung von Problemen mit der Seitengeschwindigkeit kann sehr kompliziert sein. Wenden Sie sich daher an Ihr Webentwicklungsteam, um zu besprechen, wie Sie die Empfehlungen von Google umsetzen können.

Zusätzliche Ressourcen

Page Speed ​​und Core Web Vitals decken nur einen Aspekt der Page-Experience-Signale ab, die Google zur Ermittlung von Suchrankings nutzt.

Lesen Sie weiter, um mehr darüber zu erfahren, welche weiteren Schritte Sie unternehmen können, um sicherzustellen, dass Ihre Website den Benutzern das bestmögliche Erlebnis bietet:

Melden Sie sich für unseren Newsletter an, um weitere Beiträge wie diesen in Ihrem Posteingang zu erhalten: