First Contentful Paint (FCP) misst, wie lange eine Seite vom ersten Laden bis zur Anzeige des ersten gerenderten Inhalts auf dem Bildschirm dauert.
Im Jahr 2019 kündigte Google an, Websites anhand von zwei weiteren Leistungskennzahlen zu bewerten: First Contentful Paint und First Input Delay.
Später führte Google drei ein Kern-Web-Vitale: Erste Eingangsverzögerung, Kumulative Layoutverschiebung.
In diesem Artikel werden wir über First Contentful Paint sprechen, da es nach wie vor eine wichtige Kennzahl für die Benutzererfahrung ist und den Gesamtleistungswert einer Website berücksichtigt.
Was ist der erste Contentful Score?
Beim ersten Contentful Paint einer Website ruft der Browser das erste DOM-Element der Seite ab und rendert es. Canvas-Elemente, Bilder oder Text, nicht-weiße Elemente und SVGs gelten als DOM-Inhalt.
Vereinfacht ausgedrückt ist FCP die Zeit, die ein Website-Benutzer benötigt, um Inhalte in seinem Browser zu sehen, nachdem er auf den Website-Link geklickt hat.
Daher stellt ein blitzschneller FCP sicher, dass Benutzer etwas Nützliches finden, sobald sie auf der Seite landen.
Wir haben kürzlich einen Beitrag zum Thema First Input Delay veröffentlicht. Wenn Sie es gelesen haben, fragen Sie sich vielleicht, was der Unterschied zwischen First Contentful Paint und First Input Delay ist?
Unterschied zwischen First Contentful Paint und First Input Delay:
Erste Eingangsverzögerung (FID)
FID misst die Interaktivität: die Zeit, die eine Website benötigt, um zu reagieren, nachdem der Besucher mit ihr interagiert (z. B. auf eine Schaltfläche oder einen Link klickt).
Erste Contentful Paint (FCP):
FCP misst, wie lange eine Seite vom ersten Laden bis zur Anzeige des ersten gerenderten Inhalts auf dem Bildschirm dauert.
Einige von Ihnen fragen sich vielleicht, wie sich die erste Farbe von der ersten inhaltlichen Farbe unterscheidet. Lass uns einen Blick darauf werfen:
First Paint vs. First Contentful Paint:
Für die Ungeübten: First Paint ist, wenn ein Rendering vom Browser erkannt wird. Dieses Rendering könnte genauso dezent sein wie die Hintergrundfarbe.
- Erste Anstriche:
First Paints werden sehr früh beim Laden der Seite ausgelöst, liefern den Benutzern jedoch keine Informationen oder „Inhalte“. Die Hintergrundfarbe wird normalerweise schnell gemalt, während es länger dauert, bis der eigentliche Inhalt auf dem Bildschirm erscheint.
Der Zeitpunkt des ersten Lackierens ist daher nicht so nützlich, da die Website keine wirklich nützlichen Informationen anzeigt.
- Erste zufriedene Farbe:
First Contentful Paint bedeutet das Laden jeglicher „Inhalte“, die für die Endbenutzer informativ sind. Es wird ausgelöst, wenn ein Inhalt gezeichnet wird. Text, Bild oder Leinwandrendering.
Das Timing von First Contentful Paint gibt einen nützlichen Einblick darüber, wie schnell Ihre Benutzer von Ihrer Website erfahren, da es die Ladezeit des tatsächlichen Inhalts auf der Seite darstellt. Da der Schwerpunkt auf dem „Inhalt“ liegt, handelt es sich im Vergleich zum ersten Mal um eine nützlichere Metrik.
Wie misst man First Contentful Paint?
Webmaster oder Herausgeber können den First Contentful Paint ihrer Website mithilfe mehrerer Tools messen, darunter:
Was ist ein guter FCP-Score?
Gemäß den Richtlinien von Google sollte der erste Contentful Paint einer Webseite innerhalb von 1.8 Sekunden erfolgen. Wenn eine Webseite innerhalb von 2 Sekunden geladen wird, sorgt dies für ein gutes Benutzererlebnis für die Besucher, da sie schneller auf die Informationen zugreifen können.
Wenn das Laden des ersten Inhaltsbildes einer Website länger als 3 Sekunden dauert, gilt es als langsam.
Google bewertet das FCP-Timing in drei verschiedenen Kategorien:
- Gut – zwischen 0 Sekunden und 1.8 Sekunden
- Verbesserungsbedarf – zwischen 1.8 Sekunden und 3 Sekunden
- Schlecht – über 3 Sekunden
So verbessern Sie die First Contentful Paint (FCP)-Zeit:
Nachdem wir nun verstanden haben, was FCP ist und warum es wichtig ist, werfen wir einen Blick darauf, wie man das FCP-Timing verbessern kann:
- Eliminieren Sie Render-blockierende Ressourcen:
Renderblockierende Ressourcen sind die Dateien, die auf einer Website gerendert werden müssen. Dazu können Schriftarten, CSS-Dateien, JavaScript und HTML gehören. Diese Dateien werden als „Rendering-Blockierung“ bezeichnet, da sie Vorrang vor anderen Elementen der Seite haben (z. B. Bilder, Text oder andere für den Benutzer sichtbare Inhalte).
Diese Verzögerung führt zu einem plötzlichen Anstieg des FCP, da Renderblockierungsdateien normalerweise groß sind und nicht einmal Website-Inhalte enthalten.
Die FCP-Zeit kann reduziert werden, wenn Sie Rendering-Ressourcen aus dem kritischen Rendering-Pfad entfernen, nicht kritische Ressourcen zurückstellen oder unnötiges JS entfernen. - Reduzieren Sie die Antwortzeit des Servers:
TTFB oder Time to First Byte ist die Gesamtzeit, die ein Browser benötigt, um das erste Byte eines Seiteninhalts zu empfangen. Wenn TTFB kleiner ist, wird auch das FCP-Timing kleiner sein.
Hier ist wie,
FCP = TTFB + Renderzeit + Inhaltsladezeit
Wie Sie sehen, ist FCP vom TTFB abhängig. Daher würde die Optimierung von TTFB automatisch den FCP-Score verbessern. Sie können die TTFB reduzieren, indem Sie ein hochwertiges CDN verwenden, Caching für Ihre Website aktivieren und einen schnellen Hosting-Anbieter wählen. - Entfernen Sie unnötiges CSS
Wenn Sie Dateien in Ihren Stylesheets haben, die nicht verwendet werden, aber viel Geschwindigkeit erfordern, macht es keinen Sinn, sie zu behalten. Daher sollte jeglicher ungenutzte oder alte Code entfernt werden, damit er sich nicht auf die Ladezeit Ihrer Website auswirkt.
- Minimieren Sie HTML, JavaScript und CSS
Durch die Minimierung von HTML, JavaScript und CSS kann die FCP-Zeit Ihrer Website erheblich verkürzt werden. Bei der Minimierung werden alle zusätzlichen Zeichen wie Leerzeichen aus den CSS-, HTML- und JavaScript-Dateien Ihrer Website entfernt. Während Abstände die Lesbarkeit verbessern, sind sie für Browser nicht erforderlich. Diese Leerzeichen beanspruchen tatsächlich Bytes, und ihre Minimierung würde die Seitengröße verringern und das Timing des First Contentful Paint verbessern.
The Bottom Line:
Da Google die Seitengeschwindigkeit als wichtige Leistungskennzahl ansieht, wird First Contentful Paint auch weiterhin eine wichtige Kennzahl für Websites bleiben.
Eine niedrige FCP-Zeitleiste sorgt nicht nur dafür, dass die Benutzer auf Ihrer Website bleiben, sondern verbessert auch die allgemeine Benutzererfahrung.
Wir stimmen zu, dass FCP eine schwer zu bestimmende Kennzahl sein kann, aber eine kleine Optimierung zur Reduzierung des FCP wird sicherlich die UX und die Gesamtladezeiten Ihrer Website erhöhen.
Häufig gestellte Fragen
First Contentful Paint (FCP) misst, wie schnell Besucher tatsächliche Inhalte (Texte, Bilder, Videos usw.) auf Ihrer Seite sehen können. Unsere Legacy-Berichte haben den FCP bereits erfasst, der mit der Ladegeschwindigkeit Ihrer Seite zusammenhängt.
Während des First Contentful Paint (FCP) rendert der Browser den ersten Inhalt aus dem DOM und gibt dem Benutzer den ersten Hinweis darauf, dass die Seite geladen wird.
Basierend auf Daten aus dem HTTP-Archiv vergleicht Ihr FCP-Score die FCP-Zeit Ihrer Seite mit der von echten Websites. FCP rendert beispielsweise in 1.2 Sekunden für Websites, die im neunundneunzigsten Perzentil arbeiten. Ihr FCP-Score beträgt 99, wenn der FCP Ihrer Website 1.2 Sekunden beträgt.
Shubham ist ein digitaler Vermarkter mit umfangreicher Erfahrung in der Werbetechnologiebranche. Er verfügt über umfassende Erfahrung in der Programmbranche und leitet Geschäftsstrategien und Skalierungsfunktionen, einschließlich, aber nicht beschränkt auf, Wachstum und Marketing, Betrieb, Prozessoptimierung und Vertrieb.
