Was ist FCP? First Contentful Paint (FCP)

First Contentful Paint (FCP) ist eine wichtige benutzerzentrierte Metrik zur Messung der wahrgenommenen Ladegeschwindigkeit, da es den Zeitpunkt in der Seitenladezeitleiste markiert, an dem der Benutzer zum ersten Mal etwas auf dem Bildschirm sieht. Ein schneller FCP gibt Benutzern die Gewissheit, dass etwas passiert.

uzbox

2022-03-22

Erste inhaltliche Farbe (FCP) ist die MessungWahrgenommene LadegeschwindigkeitFCP ist eine wichtige benutzerzentrierte Kennzahl, da sie den Zeitpunkt in der Seitenladezeitleiste markiert, an dem ein Benutzer zum ersten Mal etwas auf dem Bildschirm sieht. Ein schnelles FCP gibt Benutzern die Gewissheit, dass etwas passiert.Benehmen.

Was ist FCP?

Die Metrik First Contentful Paint (FCP) misst die Zeit, die benötigt wird, bis eine Seite geladen wird und bis ein Teil des Seiteninhalts vollständig auf dem Bildschirm dargestellt wird. „Inhalt“ bezieht sich bei dieser Metrik auf Text, Bilder (einschließlich Hintergrundbilder),

In der Ladezeitleiste oben erfolgt FCP im zweiten Frame, da zu diesem Zeitpunkt die ersten Text- und Grafikelemente auf dem Bildschirm fertig gerendert sind.

Sie werden feststellen, dass die Darstellung einiger Inhalte abgeschlossen ist, jedoch nicht aller Inhalte.ErsteContent Paint (FCP) und*Größtes Contentful Paint (LCP)* (damit wird gemessen, wann der Hauptinhalt der Seite vollständig geladen ist).

Was ist ein guter FCP-Score?

Um eine gute Benutzererfahrung zu bieten, sollten Websites versuchen, den ersten Inhaltsanstrich innerhalb1,8 SekundenUm sicherzustellen, dass Sie das empfohlene Ziel für die meisten Ihrer Benutzer erreichen, ist ein guter Messschwellenwert75. Perzentilund dieser Schwellenwert gilt sowohl für mobile als auch für Desktop-Geräte

So messen Sie FCP

FCP kannLaborMessen odertatsächlichGemessen und einsetzbar in folgenden Werkzeugen:

Messwerkzeuge

Laborwerkzeuge

Messen von FCP in JavaScript

Um FCP in JavaScript zu messen, können Sie verwendenAPI für die ZeichenzeitDas folgende Beispiel zeigt die Erstellung einesLeistungsbeobachterum auf einen Paint-Eintrag mit dem Namen „first-contentful-pain“ zu warten und ihn in der Konsole zu protokollieren.

Im obigen Beispiel wurde die aufgezeichneteerste-inhaltliche-MalereiDer Eintrag gibt an, wann das erste Inhaltselement gezeichnet wird. In manchen Fällen kann dieser Eintrag jedoch nicht zur Messung des FCP verwendet werden.

In den folgenden Abschnitten werden die Unterschiede zwischen den von der API gemeldeten Daten und der Berechnung der Metriken aufgeführt.

Unterschiede zwischen Indikatoren und APIs

Die API versendet für Seiten, die in Hintergrund-Tabs geladen werdenerste-inhaltliche-MalereiEinträge, aber diese Seiten sollten bei der Berechnung des FCP ignoriert werden (der Zeitpunkt des ersten Malens sollte nur berücksichtigt werden, wenn die Seite immer im Vordergrund ist).
Wenn die Seite passiertRoundtrip-CacheBeim Fortsetzen meldet die API nichterste-inhaltliche-MalereiEinträge, aber in diesen Fällen sollte FCP gemessen werden, da es sich für den Benutzer um mehrere unterschiedliche Seitenbesuche handelt.
API Malzeiten in Cross-Origin-Iframes werden möglicherweise nicht gemeldet, aber um FCP korrekt zu messen, sollten Sie alle Frames berücksichtigen. Untergeordnete Frames können die API verwenden, um den Zeichenzeitpunkt dieser Frames zur Aggregation an den übergeordneten Frame zu melden.

Anstatt sich all diese Nuancen merken zu müssen, können EntwicklerWeb-Vitals-JavaScript-BibliothekUm LCP zu messen, behandelt die Bibliothek diese Unterschiede selbst (sofern möglich):

Import {getFCP} aus „Web-Vitalwerte“; // Messen und protokollieren, sobald LCP verfügbar ist. getFCP(Konsole.Protokoll);

Ein vollständiges Beispiel zur Messung von LCP in JavaScript finden Sie im Quellcode von getLCP().

So verbessern Sie FCP

Um zu erfahren, wie Sie die FID für eine bestimmte Site verbessern können, können Sie ein Lighthouse-Leistungsaudit durchführen und sich die spezifischen Optionen ansehen, die das Audit empfiehlt.ChanceoderDiagnose.

Informationen zu gängigen Methoden zur Verbesserung des FCP (für jede Site) finden Sie in den folgenden Leistungsleitfäden:

Punktzahl

Das ist eine gute Idee