First Contentful Paint (FCP)

Philip Walton

Was ist FCP?

„First Contentful Paint“ (FCP) misst 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 bei den meisten Nutzern erreichen, eignet sich zur Messung das 75. Perzentil der Seitenaufbauvorgänge, segmentiert nach Mobil- und Desktopgeräten.

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('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

Im vorherigen Code-Snippet gibt der geloggte first-contentful-paint-Eintrag an, wann das erste Element mit Inhalt gerendert wurde. In einigen Fällen ist dieser Eintrag jedoch nicht zur Messung von FCP gültig.

Im folgenden Abschnitt werden die Unterschiede zwischen den API-Berichten und der Berechnung des Messwerts aufgeführt.

Unterschiede zwischen dem Messwert und der API

• Die API sendet einen first-contentful-paint-Eintrag für Seiten, die in einem Hintergrundtab geladen werden. Diese Seiten sollten bei der Berechnung des FCP jedoch ignoriert werden. Die Zeit bis zur ersten Darstellung sollte nur berücksichtigt werden, wenn die Seite die ganze Zeit im Vordergrund war.
• Die API meldet keine first-contentful-paint-Einträge, wenn die Seite aus dem Zurück-/Vorwärts-Cache wiederhergestellt wird. In diesen Fällen sollten jedoch Seitenaufrufe nach dem Laden gemessen werden, da Nutzer sie als separate Seitenaufrufe wahrnehmen.
• Die API erfasst möglicherweise keine Paint-Timings von iframes mit unterschiedlichen Ursprüngen. Für eine korrekte Messung der FCP sollten Sie jedoch alle Frames berücksichtigen. Untergeordnete Frames können die API verwenden, um ihre Paint-Timings zur Aggregation an den übergeordneten Frame zu melden.
• Die API misst den FCP ab Beginn der Navigation. Bei vorab gerenderten Seiten sollte der FCP jedoch ab activationStart gemessen werden, da dies der vom Nutzer wahrgenommenen FCP-Zeit entspricht.

Anstatt sich all diese subtilen Unterschiede zu merken, können Entwickler FCP mithilfe der web-vitals-JavaScript-Bibliothek messen (wo dies möglich ist, wobei das iFrame-Problem nicht behandelt wird):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

Im Quellcode für onFCP() finden Sie ein vollständiges Beispiel für die Messung von FCP in JavaScript.

FCP verbessern

Wenn Sie wissen möchten, wie Sie den FCP für eine bestimmte Website verbessern können, können Sie eine Lighthouse-Leistungsüberprüfung durchführen und dabei auf bestimmte Empfehlungen oder Diagnosen achten, die bei der Prüfung vorgeschlagen werden.

Informationen dazu, wie Sie die FCP für alle Websites allgemein verbessern können, finden Sie in den folgenden Leistungsleitfäden:

• Ressourcen entfernen, die das Rendering blockieren
• CSS reduzieren
• Nicht verwendetes CSS entfernen
• Nicht verwendetes JavaScript entfernen
• Vorabverbindung zu erforderlichen Ursprüngen herstellen
• Serverantwortzeiten verkürzen (TTFB)
• Mehrfache Seitenweiterleitungen vermeiden
• Wichtige Anfragen vorab laden
• Enorme Netzwerknutzlasten vermeiden
• Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen
• Übermäßige DOM-Größe vermeiden
• Tiefe kritischer Anforderungen minimieren
• Achten Sie darauf, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt.
• Behalten Sie die Anzahl der Anfragen niedrig und die Übertragungsgröße gering.

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs, mit denen Messwerte gemessen werden, und manchmal in den Definitionen der Messwerte selbst entdeckt. Daher müssen manchmal Änderungen vorgenommen werden, die sich als Verbesserungen oder Regressionen in Ihren internen Berichten und Dashboards zeigen können.

Alle Änderungen an der Implementierung oder Definition dieser Messwerte werden in diesem Changelog aufgeführt.

In der Google-Gruppe „web-vitals-feedback“ können Sie uns Feedback zu diesen Messwerten geben.