First Contentful Paint (FCP)

Philip Walton

First Contentful Paint (FCP) ist ein wichtiger nutzerorientierter Messwert zum Messen der wahrgenommenen Ladegeschwindigkeit. Es markiert den ersten Punkt auf der Zeitleiste für den Seitenaufbau, an dem der Nutzer alles auf dem Bildschirm sehen kann. Ein schneller FCP kann dem Nutzer versichern, dass etwas passiert.

FCP misst die Zeit vom ersten Aufrufen der Seite bis zu dem Zeitpunkt, zu dem ein Teil des Seiteninhalts auf dem Bildschirm gerendert wird. Für diesen Messwert bezieht sich „Inhalt“ auf Text, Bilder (einschließlich Hintergrundbilder), <svg>-Elemente oder nicht-weiße <canvas>-Elemente.

Beim Rendern des ersten Inhaltselements wird nicht der gesamte Inhalt gerendert. Das ist eine wichtige Unterscheidung zwischen FCP und Largest Contentful Paint (LCP), bei dem gemessen wird, wann der Hauptinhalt der Seite fertig geladen ist.

Was ist ein guter FCP-Wert?

Für eine gute Nutzerfreundlichkeit dürfen Websites einen FCP-Wert von maximal 1, 8 Sekunden haben. Damit Sie dieses Ziel für die meisten Nutzer erreichen, sollten Sie das 75. Perzentil der Seitenaufbauvorgänge, segmentiert nach Mobilgeräten und Desktop-Geräten, messen.

FCP-Messung

FCP kann im Lab oder vor Ort gemessen werden und ist in den folgenden Tools verfügbar:

Außendienst-Tools

• PageSpeed Insights
• Bericht zur Nutzererfahrung in Chrome
• Search Console (Geschwindigkeitsbericht)
• web-vitals-JavaScript-Bibliothek

Lab-Tools

• Leuchtturm
• Chrome-Entwicklertools
• PageSpeed Insights

FCP in JavaScript messen

Um FCP in JavaScript zu messen, verwenden Sie die Paint Timing API. Das folgende Beispiel zeigt, wie Sie einen PerformanceObserver erstellen, der 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});

In diesem Beispiel gibt der protokollierte first-contentful-paint-Eintrag an, wann das erste Inhaltselement dargestellt wurde. In einigen Fällen eignet sich dieser Eintrag jedoch nicht zum Messen von FCP.

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

Unterschiede zwischen Messwert und API

• Die API gibt einen first-contentful-paint-Eintrag für Seiten aus, die auf einem Hintergrund-Tab geladen werden. Diese Seiten sollten jedoch bei der Berechnung von FCP ignoriert werden. Das Timing der ersten Farbe wird nur dann berücksichtigt, wenn die Seite die gesamte Zeit im Vordergrund zu sehen war.
• Die API meldet keine first-contentful-paint-Einträge, wenn die Seite aus dem Back-Forward-Cache wiederhergestellt wird. Allerdings sollte in diesen Fällen der FCP-Wert gemessen werden, da der Nutzer sie als unterschiedliche Seitenaufrufe empfindet.
• Die API meldet möglicherweise keine Paint-Timings von ursprungsübergreifenden iFrames. Damit FCP jedoch richtig gemessen werden kann, müssen Sie alle Frames berücksichtigen. Subframes können die API verwenden, um ihre Paint-Times zur Aggregation an den übergeordneten Frame zu melden.
• Die API misst den FCP-Wert ab Beginn der Navigation. Bei vor gerenderten Seiten sollte FCP jedoch ab activationStart gemessen werden, da dies der FCP-Zeit entspricht, die der Nutzer sieht.

Anstatt sich all die subtilen Unterschiede zu merken, können Entwickler die web-vitals-JavaScript-Bibliothek verwenden, um den FCP-Wert zu messen. Dadurch werden diese Unterschiede nach Möglichkeit für Sie verarbeitet (außer in iFrames):

import {onFCP} from 'web-vitals';

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

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

FCP verbessern

Wenn Sie erfahren möchten, wie Sie FCP für eine bestimmte Website verbessern können, können Sie eine Lighthouse-Leistungsüberprüfung durchführen und dabei alle Möglichkeiten oder Diagnosen berücksichtigen, die aus der Prüfung vorgeschlagen werden.

Informationen zum Verbessern von FCP im Allgemeinen für jede Website finden Sie in den folgenden Leistungsleitfäden:

• Ressourcen entfernen, die das Rendering blockieren
• CSS reduzieren
• Nicht verwendete CSS entfernen
• Nicht verwendetes JavaScript entfernen
• Vorverbindung zu erforderlichen Ursprüngen herstellen
• Serverantwortzeiten verkürzen (TTFB)
• Mehrfache Weiterleitungen vermeiden
• Schlüsselanfragen vorab laden
• Sehr große Netzwerknutzlasten vermeiden
• Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen
• Übermäßige DOM-Größe vermeiden
• Umfang kritischer Anfragen minimieren
• Sicherstellen, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt
• Halten Sie die Anfrageanzahl niedrig und die Übertragungsgröße gering.

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs entdeckt, die zum Messen von Messwerten verwendet werden, und manchmal in den Definitionen der Messwerte selbst. Aus diesem Grund müssen manchmal Änderungen vorgenommen werden, die sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Regressionen zeigen lassen.

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

Wenn du Feedback zu diesen Messwerten hast, kannst du es in der Google-Gruppe „web-vitals-feedback“ einreichen.