First Contentful Paint (FCP)

Philip Walton

Was ist FCP?

„First Contentful Paint“ (FCP) ist die Zeitspanne zwischen dem Zeitpunkt, zu dem der Nutzer die Seite aufgerufen hat, und dem Zeitpunkt, zu dem ein beliebiger Teil des Seiteninhalts auf dem Bildschirm gerendert wird. Bei diesem Messwert bezieht sich „Inhalt“ auf Text, Bilder (einschließlich Hintergrundbilder), <svg>-Elemente oder nicht weiße <canvas>-Elemente.

In der im vorherigen Bild dargestellten Ladezeitachse erfolgt die FCP im zweiten Frame, da dort die ersten Text- und Bildelemente auf dem Bildschirm gerendert werden.

Sie werden feststellen, dass einige Inhalte gerendert wurden, aber nicht alle. Es ist wichtig, zwischen First Contentful Paint und Largest Contentful Paint (LCP) zu unterscheiden. Letzterer gibt an, wann der Hauptinhalt der Seite vollständig geladen ist.

Was ist ein guter FCP-Wert?

Für eine gute Nutzerfreundlichkeit sollten Websites einen First Contentful Paint von 1, 8 Sekunden oder weniger anstreben. Damit Sie dieses Ziel für die meisten Nutzer erreichen, ist der 75. Perzentilwert der Seitenladezeiten, segmentiert nach Mobilgeräten und Computern, ein guter Messwert.

FCP messen

Der FCP kann im Labor oder im Feld gemessen werden und ist in den folgenden Tools verfügbar:

Tools für die Arbeit im Außendienst

• PageSpeed Insights
• Chrome User Experience Report
• Search Console (Bericht zur Geschwindigkeit)
• web-vitals JavaScript-Bibliothek

Lab-Tools

• Leuchtturm
• Chrome-Entwicklertools
• PageSpeed Insights

FCP in JavaScript messen

Wenn Sie den FCP in JavaScript messen möchten, können Sie die Paint Timing API verwenden. Im folgenden Beispiel wird gezeigt, wie eine PerformanceObserver erstellt wird, die auf einen paint-Eintrag mit dem Namen first-contentful-paint wartet und ihn in der Console protokolliert.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log