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 Wert für die erste vollständige Darstellung von 1, 8 Sekunden oder weniger anstreben. Damit Sie dieses Ziel für die meisten Nutzer erreichen, ist der 75. Perzentilwert der Seitenladezeiten ein guter Messwert. Dieser sollte für Mobilgeräte und Computer getrennt gemessen werden.

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 first-contentful-paint-Eintrag an, wann das erste Element mit Inhalt gerendert wurde. In einigen Fällen ist dieser Eintrag jedoch nicht für die Messung der Conversions nach dem ersten Besuch gültig.

Im folgenden Abschnitt werden die Unterschiede zwischen den Angaben in der API 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 kleinen Unterschiede zu merken, können Entwickler die web-vitals JavaScript-Bibliothek verwenden, um den FCP zu messen. Diese Bibliothek berücksichtigt diese Unterschiede nach Möglichkeit (das Problem mit dem Iframe wird jedoch nicht abgedeckt):

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 der ersten Ladezeit 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-Leistungsanalyse durchführen und sich die Empfehlungen oder Diagnosedaten ansehen, die die Analyse vorschlägt.

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 minimieren
• Nicht verwendetes CSS entfernen
• Nicht verwendetes JavaScript entfernen
• Vorverbindung zu erforderlichen Quellen aufbauen
• Serverantwortzeiten (TTFB) verkürzen
• Mehrere Seitenweiterleitungen vermeiden
• Schlüsselanfragen vorab laden
• Sehr große Netzwerknutzlasten vermeiden
• Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen
• Übermäßige DOM-Größe vermeiden
• Tiefe kritischer Anforderungen minimieren
• Achten, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt
• Halte die Anfrageanzahl niedrig und die Übertragungsgröße gering

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs gefunden, die zum Erfassen von Messwerten verwendet werden, und manchmal auch in den Definitionen der Messwerte selbst. Daher müssen manchmal Änderungen vorgenommen werden. Diese Änderungen können sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Rückschritte zeigen.

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

Wenn Sie Feedback zu diesen Messwerten haben, können Sie es in der Google-Gruppe „web-vitals-feedback“ geben.