First Contentful Paint (FCP) ist einer von sechs Messwerten, die im Abschnitt Leistung des Lighthouse-Berichts erfasst werden. Mit jedem Messwert wird ein bestimmter Aspekt der Seitenladegeschwindigkeit erfasst.
Lighthouse zeigt FCP in Sekunden an:
![Screenshot der Prüfung von Lighthouse First Contentful Paint](https://developer.chrome.com/static/docs/lighthouse/performance/first-contentful-paint/image/a-screenshot-the-lightho-07286fe9106ca.png?authuser=6&hl=de)
Was mit FCP gemessen wird
Mit FCP wird gemessen, wie lange der Browser braucht, um den ersten DOM-Inhalt zu rendern, nachdem ein Nutzer Ihre Seite aufgerufen hat.
Bilder, nicht weiße <canvas>
-Elemente und SVGs auf Ihrer Seite werden als DOM-Inhalte betrachtet. Alles innerhalb eines iFrames ist nicht enthalten.
So bestimmt Lighthouse den FCP-Wert
Dein FCP-Wert ist ein Vergleich der FCP-Zeit und FCP-Zeit deiner Seite für echte Websites und basiert auf Daten aus dem HTTP-Archiv. Beispielsweise wird FCP bei Websites mit einer Leistung im 99.Perzentil in etwa 1, 2 Sekunden gerendert. Wenn der FCP-Wert Ihrer Website 1,2 Sekunden beträgt, beträgt Ihr FCP-Wert 99. Informationen dazu, wie die Lighthouse-Wertegrenzwerte festgelegt werden, finden Sie unter So werden Punktzahlen ermittelt.
In der folgenden Tabelle sehen Sie, wie Sie Ihren FCP-Wert interpretieren:
FCP-Zeit (in Sekunden) |
Farbcodierung |
---|---|
0–1,8 | Grün (schnell) |
1,8–3 | Orange (mittel) |
Mehr als 3 | Rot (langsam) |
FCP-Wert verbessern
Ein für FCP besonders wichtiges Problem ist die Ladezeit der Schriftart. Wie Sie das Laden von Schriftarten beschleunigen können, erfahren Sie im Beitrag Sicherstellen, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt.
FCP auf den Geräten echter Nutzer erfassen
Informationen dazu, wie Sie messen können, wann FCP auf den Geräten Ihrer Nutzer tatsächlich auftritt, finden Sie auf der Google-Seite Nutzerorientierte Leistungsmesswerte. Im Abschnitt FP/FCP-Tracking wird beschrieben, wie Sie programmatisch auf FCP-Daten zugreifen und sie an Google Analytics senden können.
Weitere Informationen zum Erfassen von Nutzermesswerten finden Sie im Artikel Ladeleistung in der realen Welt mit Navigation und Ressourcentiming bewerten.
So verbessern Sie Ihre allgemeine Leistungsbewertung
Sofern Sie keinen bestimmten Grund dafür haben, sich auf einen bestimmten Messwert zu konzentrieren, ist es in der Regel besser, die Gesamtleistung zu verbessern.
Im Abschnitt Empfehlungen Ihres Lighthouse-Berichts können Sie ermitteln, welche Verbesserungen für Ihre Seite am wertvollsten sind. Je größer die Chance, desto größer ist der Effekt auf die Leistungsbewertung. Der folgende Lighthouse-Screenshot zeigt beispielsweise, dass das Entfernen von Ressourcen, die das Rendering blockieren, die größte Verbesserung bringt:
![Lighthouse: Bereich „Empfehlungen“](https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png?authuser=6&hl=de)
Auf der Landingpage für Leistungsberichte erfahren Sie, wie Sie die im Lighthouse-Bericht ermittelten Optimierungsmöglichkeiten nutzen können.