First Contentful Paint (FCP)

<ph type="x-smartling-placeholder">

Was ist FCP?

First Contentful Paint (FCP) gibt an, wie viel Zeit zwischen dem Aufrufen der Seite durch den Nutzer und dem Rendern eines Teils des Seiteninhalts vergeht. Für diesen Messwert: „content“ bezieht sich auf Text, Bilder (einschließlich Hintergrundbilder), <svg>-Elemente oder nicht weiße <canvas>-Elemente.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

Sie werden feststellen, dass zwar ein Teil des Inhalts, aber nicht der gesamte Inhalt gerendert wurde. Das ist eine wichtige Unterscheidung zwischen First Contentful Paint und Largest Contentful Paint (LCP). Damit wird gemessen, wann der Hauptinhalt einer Seite geladen wurde.

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.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph>

FCP messen

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

Feld-Tools

• PageSpeed Insights
• Chrome-Nutzererfahrung Melden
• Search Console (Geschwindigkeit Bericht)
• web-vitals-JavaScript-Bibliothek

Lab-Tools

• Leuchtturm
• Chrome-Entwicklertools
• PageSpeed Insights

FCP in JavaScript messen

Um FCP in JavaScript zu messen, können Sie die Paint Timing API verwenden. Das folgende Beispiel zeigt, wie Sie einen PerformanceObserver erstellen, der auf einen paint-Eintrag mit dem Namen first-contentful-paint wartet und in der Konsole 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});

<ph type="x-smartling-placeholder">

Im vorherigen Code-Snippet gibt der protokollierte Eintrag first-contentful-paint an, wann das erste Contentful-Element gezeichnet 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 für Seiten, die in einem Tab im Hintergrund geladen werden, einen first-contentful-paint-Eintrag. Diese Seiten sollten jedoch bei der Berechnung des FCP ignoriert werden. Das Timing von First Paint 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 Back-Forward-Cache wiederhergestellt wird. FCP sollte in diesen Fällen jedoch gemessen werden, da die Nutzer sie als separate Seitenaufrufe erleben.
• Die API meldet möglicherweise keine Paint-Timings aus ursprungsübergreifenden iFrames. Zur korrekten Messung von FCP sollten Sie jedoch alle Frames berücksichtigen. Subframes können die API verwenden, um ihr Paint-Timing an den übergeordneten Frame für die Aggregation zu melden.
• Die API misst den FCP ab Beginn der Navigation. Für vorab gerenderte Seiten sollte der FCP ab activationStart gemessen werden, da dies der vom Nutzer erfassten FCP-Zeit entspricht.

Anstatt sich all diese feinen Unterschiede zu merken, können Entwickler die web-vitals-JavaScript-Bibliothek zur Messung von FCP verwenden. Dort werden diese Unterschiede für Sie behoben (wo möglich – beachten Sie, dass 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.

<ph type="x-smartling-placeholder">

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 zur allgemeinen Verbesserung von FCP (für jede Website) finden Sie in den folgenden Leistungsleitfäden:

• Ressourcen entfernen, die das Rendering blockieren
• CSS reduzieren
• Nicht verwendetes Preisvergleichsportal entfernen
• Nicht verwendetes JavaScript entfernen
• Vorverbindung 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 Anfragen minimieren
• Dafür sorgen, dass der Text beim Laden von Webfonts sichtbar bleibt
• Behalten Sie die Anzahl der Anfragen niedrig und die Übertragungsgröße gering.

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs, die zum Messen von Messwerten verwendet 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 der Definition dieser Messwerte werden in diesem Änderungsprotokoll veröffentlicht, um Ihnen die Verwaltung zu erleichtern.

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