FirstContentful Paint (FCP) misst die Ladezeit von Elementen auf einer Webseite und wird manchmal mit First Paint (FP) verwechselt. Der Unterschied zwischen den beiden besteht darin, dass FP die Zeit misst, die benötigt wird, um die allerersten Pixel im Browser zu laden, nachdem ein Benutzer eine Seite besucht hat, während FCP die Ladezeit von für den Benutzer nützlichen Inhalten wie Text oder Grafiken misst. Bei einer schnellen und einfachen Website, die über eine schnelle Internetverbindung aufgerufen wird, liegen die beiden Werte sehr nahe beieinander, bei einer komplexen Website, die über ein langsames Netz aufgerufen wird, sind sie jedoch unterschiedlich.
For a more formal definition, First Contentful Paint (FCP) is a browser performance metric that measures the time to render the first content of the Document Object Model (DOM) when loading a web page. These DOM elements include images, text, non-white <canvas> elements, and Scalable Vector Graphics (SVG) files.
Wenn der FCP niedrig ist, sieht der Benutzer den Inhalt sofort, wenn er die URL eingibt und die Webseite lädt. Andererseits benötigt der Browser eine lange Zeit, um den ersten Inhalt zu rendern, wenn die Webseite einen höheren FCP-Wert hat, was der Benutzer als langsame Webseite wahrnimmt.
{{banner-16="/design/banners"}}
Wie sich die erste inhaltsreiche Farbe zur größten inhaltsreichen Farbe verhält
FCP und Largest Contentful Paint (LCP) messen das Laden von Elementen auf einer Webseite. LCP misst die Zeit, die das größte Element (oft ein Bild) benötigt, um im Ansichtsfenster zu erscheinen, bevor der Benutzer scrollt oder auf eine Schaltfläche klickt.
Im Gegensatz dazu unterscheidet FCP bei seiner Messung nicht zwischen den Größen der Elemente und misst einfach die Zeit, die der Browser benötigt, um das erste DOM-Element zu laden, unabhängig von seiner Größe, bei der es sich um Text, Bilder oder SVG handeln kann.
Wie sich der erste inhaltsreiche Anstrich auf SEO auswirkt
Die Seitengeschwindigkeit ist ein wichtiger Faktor, den Google beim Ranking von Websites für SEO berücksichtigt: Eine Website wird von Suchmaschinen hoch eingestuft, wenn sie schnell ist. FCP ist für den Benutzer nützlich, weil es zeigt, wie schnell die Seite visuelles Feedback liefert, auch wenn LCP möglicherweise mehr mit der Wahrnehmung der Seitengeschwindigkeit durch den Benutzer korreliert ist. Das folgende Bild zeigt zum Beispiel den Unterschied zwischen FCP und LCP beim Laden einer LinkedIn-Seite.
Obwohl FCP keine zentrale Webvitalmetrik ist, ist LCP eine zentrale Webvitalmetrik, die durch langsameres FCP beeinflusst werden kann. So verzögern beispielsweise Rendering-blockierende Ressourcen wie JavaScript und CSS den FCP und damit auch den LCP. Darüber hinaus benötigt die Seite mehr Zeit, um den FCP zu erreichen und folglich auch den LCP bei größeren Bildern.
{{banner-34="/design/banners"}}
Die geschäftlichen Auswirkungen von First Contentful Paint: Eine Fallstudie
Die Renault-Gruppe ist ein multinationaler Automobilhersteller in Frankreich mit Niederlassungen in über 130 Ländern. In einer von Google dokumentierten Fallstudie wird behauptet, dass das Unternehmen durch die Optimierung von LCP die Absprungrate und die Konversionsrate seiner Website verbessert hat. Zur Verbesserung der LCP wurde das serverseitige Rendering eingesetzt, um die FCP zu verbessern.
Zunächst nutzte Renault Google Analytics, um alle Webvitaldaten von tatsächlichen Nutzern seiner Single-Page-Anwendung (SPA) zu übermitteln. Die Ergebnisse zeigten eine starke Korrelation zwischen LCP und Absprung- und Konversionsraten.
Mit steigender LCP stieg auch die Absprungrate, während die Konversionsrate sank. Die Renault-Gruppe erkannte anhand dieser Analyse die Notwendigkeit, die LCP unter 1 Sekunde zu senken, um die Absprung- und Konversionsraten zu verbessern.
Die Teams richteten Überwachungslösungen mit Google Lighthouse und Chrome UX Report API ein, um das Ziel des Unternehmens zu erreichen, und ergriffen mehrere Maßnahmen zur Optimierung der SPA. Sie fügten viele Verbesserungen hinzu, um ihre Single-Page-Anwendung zu optimieren, darunter Code-Splitting, Lazy Loading und die Verwendung responsiver Bilder. Außerdem wurde das serverseitige Rendering durchgeführt, um FCP zu verbessern. Als Ergebnis konnten sie "die Anzahl der Besucher, die eine schnelle LCP (unter 2,5 s) erleben, um durchschnittlich 22 % für Renault-Domains (von 51 % auf 73 %) verbessern." (Quelle web.dev)
Was ist ein gutes FCP-Ergebnis?
Ein guter FCP-Wert liegt im Allgemeinen unter 1,8 Sekunden. Die folgende Tabelle zeigt, wie der FCP-Wert die Leistung einer Webseite laut Google Lighthouse beeinflusst.
Wie man die erste zufriedenstellende Farbe misst
Im folgenden Beispiel sehen wir, wie man FCP mit WebPageTest messen kann. Sie können die folgenden Schritte durchführen, um einen Test auf der von Ihnen gewählten Webseite auszuführen und die wichtigsten Webvitaldaten abzurufen:
- Weiter zu https://webpagetest.org/
- Wählen Sie auf der Hauptseite die Registerkarte Webvitalien.
- Geben Sie die URL der Webseite ein, die Sie testen möchten; wir haben yahoo.com verwendet.
- Wählen Sie die gewünschte Testkonfiguration. Wenn Sie ein mobiles Rendering testen möchten, wählen Sie Mobile-4G, andernfalls verwenden Sie Desktop-Kabel.
- Starten Sie den Test und warten Sie ein paar Minuten, um die endgültigen Ergebnisse zu erhalten. Der WebPageTest führt drei Durchläufe zum Laden der Seite durch.
- Rufen Sie die Seite mit den Leistungstestergebnissen auf und klicken Sie auf den Abschnitt Web Vitals.
- Wählen Sie unter Largest Contentful Paints die Option View as Filmstrip, um zu sehen, wie die Seite Frame für Frame in 0,5-Sekunden-Intervallen geladen wird, oder sehen Sie sich das Video an, um zu sehen, wie der Benutzer das Laden der Seite erlebt.
Im Folgenden sehen Sie die Filmstreifenansicht für yahoo.com:
Die Leistungsergebnisse finden Sie auf der Registerkarte Zusammenfassung. In unserem Beispiel beträgt der FCP 0,603 s für den dritten Durchlauf, was ein sehr gutes Ergebnis ist. Der LCP beträgt 1,361 s, was bedeutet, dass diese Seite eine gute Ladegeschwindigkeit hat. Die Testergebnisse des oben genannten Tests, der auf WebPage Test durchgeführt wurde, finden Sie unter diesem Link.
Außerdem können Sie die Messwerte für alle drei Läufe vergleichen, indem Sie auf der Seite mit der Filmstreifenansicht auf die Schaltfläche Alle Läufe vergleichen klicken. Wenn Sie dann auf der Seite nach unten scrollen, können Sie den Zeitvergleich für alle Leistungskennzahlen sehen. Das folgende Bild zeigt die Zeitvergleiche für unser Beispiel. Nach dem folgenden Diagramm konnte unsere Beispiel-Webseite die FCP-Zeit bei allen drei Durchläufen unter 1 Sekunde halten.
{{banner-35="/design/banners"}}
Was trägt dazu bei, dass der erste Anstrich nicht zufriedenstellend ist?
1. Render-Blocking-Ressourcen
JavaScript, CSS und HTML sind Rendering-Blocking-Ressourcen, die sehr viel Zeit zum Laden benötigen und das Rendering der gesamten Seite erheblich behindern. Sie verzögern die Zeit bis zum Erreichen der FCP, was sich auf die LCP und die Time to Interactive (TTI) auswirkt. Bei diesen blockierenden Ressourcen handelt es sich häufig um unkritische Dateien, die Sie laden können, nachdem der Browser die wesentlichen Ressourcen gerendert hat. Es ist wichtig, die wichtigsten Ressourcen zu identifizieren und die unkritischen zu verschieben.
Das folgende Bild zeigt zum Beispiel die Leistungskennzahlen der Seite https://www.newsfirst.lk/, die Sie hier finden können. Die FCP ist mit 2,958 Sekunden sehr hoch, und auch die anderen zentralen Webvitalwerte wie LCP, CLS und TBT sind hoch.
WebPageTest kann solche Rendering-Blocking-Ressourcen identifizieren und sie mit einem orangefarbenen Kreuz markieren. Das obige Bild zeigt die Rendering-Blocking-Ressourcen unserer Beispielseite. Es zeigt, dass unsere Beispielseite mehrere Rendering-Blocking-JS- und CSS-Dateien hat.
Wie man das Problem behebt
Die Hauptlösung besteht darin, unkritischen JS- und CSS-Code aufzuschieben, bis Sie die wichtigsten Ressourcen geladen haben, die zu Beginn benötigt werden. Erstellen Sie ein Profil Ihrer Seite und identifizieren Sie die blockierenden Elemente. Das Entfernen unkritischer JavaScript- und CSS-Code von Drittanbietern und das Mining der Skripte können dieses Problem ebenfalls entschärfen.
{{banner-36="/design/banners"}}
2. Langsame Server-Reaktionszeiten
Wenn der Browser eine Netzwerkanfrage stellt, wird diese an den Server gesendet, der mit dem Seiteninhalt antwortet. Die Server-Antwortzeit ist die Zeit, die der Server benötigt, um die Antwort an den Browser zu senden. In Bezug auf die Leistungskennzahlen einer Website ist die Server-Antwortzeit die Zeit bis zum ersten Byte (TTFB), d. h. die Zeit, die der Browser benötigt, um das erste Byte der Seite zu empfangen.
Ein hoher TTFB zeigt an, dass die Reaktionszeit Ihres Servers höher ist, was sich direkt auf die Zeit bis zum Erreichen des FCP auswirkt. Das folgende Bild zeigt zum Beispiel, dass der TTFB 1,326 s beträgt.
Wie man das Problem behebt
Es gibt mehrere Lösungen, um dieses Problem zu entschärfen:
- Aktivieren Sie die Zwischenspeicherung von Inhalten für häufig verwendete Inhalte wie Texte und Bilder. Durch Caching kann der Browser Inhalte aus dem Cache abrufen, ohne sie jedes Mal vom Server zu laden.
- Verwenden Sie ein CDN zur Bereitstellung statischer Ressourcen wie Bilder und Videos, um die Netzwerklatenz zu verringern, da CDN-Server näher an den Client-Geräten stehen.
- Manchmal kann die Backend-Logik des Servers kompliziert sein; sie kann umfangreiche Verarbeitungen vornehmen, bevor eine Antwort gesendet wird. In solchen Fällen können Sie die Serverabfragen und die Backend-Logik optimieren, um die Reaktionszeit zu verbessern.
- Verbessern Sie die Leistung Ihrer Server, indem Sie mehr Kapazität oder mehr Server hinzufügen.
3. Unbenutzte CSS
Web developers usually use external stylesheets and link them to the main HTML page using a <link> tag. While that is convenient for them, it can affect the FCP if they load unused CSS. The browser parses and processes all the CSS files, and it won’t render anything before it processes the CSS because it is required for page styling. These external CSS files will have to be downloaded from the network, which can be affected by network delays. Unused CSS also slows down render tree construction as the browser checks all the CSS to construct it.
Mit dem Tool PageSpeed Insights können Sie ungenutzte CSS finden. Das folgende Bild zeigt die ungenutzten CSS in unserer Beispiel-Webseite und die potenziellen Einsparungen (0,3 s), die durch deren Optimierung erzielt werden können.
Wie man das Problem behebt
Ermitteln Sie zunächst mit den Chrome-Entwicklungstools die wichtigsten CSS, deklarieren Sie diese CSS inline und verwenden Sie den Link "preload", um den Rest der CSS asynchron zu laden. Dann muss der Browser nicht warten, bis er heruntergeladen wird; er wendet das kritische CSS, das zum Rendern der Seite erforderlich ist, sofort an.
4. Große Website-Bilder
Bilddateien sind eines der größten Elemente einer Website, die vom Browser heruntergeladen werden müssen, bevor sie angezeigt werden können. Je größer das Bild ist, desto länger dauert es, das Bild zu laden, was sich direkt auf das FCP auswirkt. Schlechtes FCP tritt häufig auf, wenn große Bilder nicht komprimiert werden, um ihre Größe zu verringern.
WebPageTest zeigt die Aufschlüsselung des Inhalts nach MIME-Typ und gibt die Größe der unkomprimierten Bilder an. Wie die Abbildung unten zeigt, enthält unsere Beispiel-Testseite viele Bild-Bytes, die alle unkomprimiert sind.
Sie zeigt auch, wie viele Bytes Sie durch die Komprimierung von Bildern einsparen können, wie unten dargestellt.
Wie man das Problem behebt
Die einfachste Lösung für dieses Problem ist die Komprimierung großer, hochauflösender Bilder. Durch die Komprimierung eines Bildes werden seine Abmessungen nicht verändert, sondern lediglich die Größe der Bilddatei durch Verringerung der darin enthaltenen Datenmenge verringert. Der Browser kann dann die komprimierten Bilder in kürzerer Zeit herunterladen. JPEG-Bilder sind jedoch bereits komprimiert. Daher funktioniert es nicht mit JPEG-Bildern.
Eine weitere Option ist die Nutzung eines Bild-Content-Delivery-Networks (CDN), das es Browsern ermöglicht, Bilder schneller abzurufen. Ein Bild-CDN ermöglicht auch die Größenänderung und Komprimierung von Bildern, um die Nutzlast zu verringern und sie für jedes anfordernde Gerät in Echtzeit zu optimieren.
{{banner-37="/design/banners"}}
5. Übermäßige DOM-Größe
Wenn Ihre Seite einen großen DOM-Baum hat, erfordert das Rendern der Seite eine erhebliche Rechenleistung. Ein großer DOM-Baum bedeutet, dass es viele unsichtbare DOM-Knoten gibt, die die Benutzer beim ersten Laden der Seite nicht sehen können. Außerdem erfordert ein großer DOM-Baum mehr Rechenzeit für die Berechnung der Stile, was die Speichernutzung erhöht und somit direkt den FCP-Wert steigert.
PageSpeed Insights zeigt an, ob die Webseite eine große DOM-Größe hat. Die folgende Abbildung zeigt, wie die DOM-Größe der Seite https://www.bbc.com/news/world angezeigt wird .
Wie man das Problem behebt
- Verwenden Sie eine Paginierung, wenn sich Elemente wiederholen, z. B. eine Liste von Produkten, Beiträgen, Kommentaren usw.
- Verwendung von Lazy Loading zum Laden von HTML-Elementen.
- Teilen Sie die Webseite in mehrere kleine Seiten auf.
Resümee
FCP ist eine wichtige Kennzahl für die Website-Leistung, die die Zeit angibt, die eine Webseite benötigt, um den ersten Inhalt des DOM zu rendern. Obwohl es sich dabei nicht um eine zentrale Webvitalität handelt, wirkt sie sich direkt auf die zentralen Webvitalitäten wie LCP aus, die das SEO-Ranking einer Webseite bestimmen. Mehrere Faktoren tragen zu einem schlechten FCP bei, z. B. Rendering-blockierende Ressourcen, ungenutztes CSS, nicht komprimierte Bilder und langsame Server-Antwortzeiten. Webentwickler können den FCP und andere wichtige Webvitalien verbessern, indem sie die in diesem Artikel beschriebenen Lösungen befolgen.
