Leitfäden

Jede Performance-Metrik beantwortet eine Frage, und sie ist nur so viel wert wie diese Frage. First Contentful Paint stellt eine, die sich jeder Besucher unbewusst stellt: Wie lange schaue ich auf nichts? Nicht wie lange, bis die Seite benutzbar ist, nicht wie lange, bis das große Bild kommt, nur wie lange, bis überhaupt etwas erscheint.

Damit ist FCP das früheste ehrliche Signal, das eine Seite geben kann. Es ist zugleich, aus Gründen, die man verstehen sollte, kein Core Web Vital, und das ändert das Gewicht, das es in Ihren Prioritäten verdient.

Was FCP tatsächlich misst

FCP misst die Zeit vom Beginn der Navigation zur Seite bis zu dem Moment, in dem irgendein Teil des Seiteninhalts erstmals auf dem Bildschirm gerendert wird. Inhalt hat hier eine präzise statt einer intuitiven Definition: Text, Bilder einschließlich Hintergrundbilder, SVG-Elemente und Canvas-Elemente, die nicht leer weiß sind.

Entscheidend ist der Unterschied zwischen First Paint und First Contentful Paint. First Paint löst aus, sobald der Browser ein Pixel ändert, was auch das Übermalen der vorherigen Seite mit einer Hintergrundfarbe einschließt. In diesem Moment ist nichts mitgeteilt worden. FCP wartet auf etwas, das ein Mensch tatsächlich lesen oder ansehen könnte.

Weil FCP der erste Inhalt ist, liegt es per Definition vor oder gleichauf mit Largest Contentful Paint. Auf einer Seite, deren größtes Element auch ihr erstes ist, sind beide dieselbe Zahl. Auf einer Seite, die sofort eine Überschrift und drei Sekunden später ein Titelbild zeigt, liegen sie weit auseinander, und genau dieser Abstand ist der interessante Teil der Messung.

Die Schwellen und das Core Web Vital, das es nicht ist

Google veröffentlicht drei Bänder für FCP, gemessen am 75. Perzentil der Seitenaufrufe und nach Gerät getrennt: gut bei 1,8 Sekunden oder weniger, verbesserungswürdig zwischen 1,8 und 3 Sekunden, schlecht über 3 Sekunden. Mobil und Desktop werden getrennt bewertet, was zählt, weil dieselbe Website regelmäßig in unterschiedlichen Bändern landet.

• Total Blocking Time - 30 %
• Largest Contentful Paint - 25 %
• Cumulative Layout Shift - 25 %
• First Contentful Paint - 10 %
• Speed Index - 10 %

FCP ist kein Core Web Vital. Die Core Web Vitals sind LCP, INP und CLS, und diese drei speisen Googles Page-Experience-Signale. FCP steht daneben als Diagnosemetrik: berichtet von PageSpeed Insights und dem Chrome User Experience Report, gewichtet im Lighthouse-Performance-Score, aber selbst nicht Teil des rankingrelevanten Satzes.

Das ist kein Grund, es zu ignorieren. Es ist ein Grund, es für das zu nutzen, was es gut kann: Ihnen zu sagen, ob Ihr Problem vor dem Rendern beginnt oder während dessen. Im Performance-Score von Lighthouse 10 verteilen sich die Gewichte so:

Was es tatsächlich verzögert

Die erste Komponente von FCP ist die Zeit bis zum ersten Byte. Nichts kann gezeichnet werden, bevor das erste Byte HTML eintrifft, also setzen ein langsamer Server, eine langsame Abfrage oder ein entfernter Origin unter FCP einen Boden, den keine Frontend-Arbeit anhebt. Liegt der TTFB bei 1,5 Sekunden, ist ein FCP unter 1,8 nahezu unmöglich.

Die zweite sind renderblockierende Ressourcen. Ein Stylesheet im Head muss heruntergeladen und geparst sein, bevor der Browser zeichnet, denn mit den falschen Styles zu zeichnen und neu zu zeichnen ist schlimmer als zu warten. Synchrone Skripte im Head blockieren das Parsen vollständig. Jede davon ist ein serialisierter Roundtrip zwischen dem Eintreffen des HTML und dem Erscheinen von irgendetwas.

Die dritte sind Webfonts, und sie wird am häufigsten übersehen. Eine Schrift mit font-display: block gibt dem Browser eine Phase, in der Text in dieser Schrift unsichtbar gerendert wird, während die Datei lädt. Unsichtbarer Text ist kein Inhalt, also wartet FCP darauf. Der Wechsel zu font-display: swap zeichnet sofort eine Ersatzschrift und tauscht die echte bei Ankunft ein, was einen sichtbaren Umbruch gegen ein früheres erstes Erscheinen echter Wörter eintauscht.

Selbst messen

Im Feld stammt FCP aus dem Chrome User Experience Report, also dem, was PageSpeed Insights im oberen Abschnitt für echte Nutzer auf echten Verbindungen zeigt. Diese Zahl ist die verlässliche, weil sie die Geräte und Netze Ihrer Besucher abbildet und nicht die Maschine, auf der Sie gerade testen.

Im Browser meldet ein PerformanceObserver auf dem Eintragstyp paint sowohl first-paint als auch first-contentful-paint. Beide zu lesen ist nützlicher, als eines allein zu lesen. Ein großer Abstand bedeutet, dass der Browser Pixel zu zeichnen hatte und zuerst eine Hintergrundfarbe wählte, die Signatur eines Stylesheets oder einer Schrift zwischen Ihrem HTML und Ihrem Leser.

FCP oder LCP: was zuerst beheben

Sind FCP und LCP beide schlecht, beheben Sie die gemeinsame Ursache und beide bewegen sich. TTFB, renderblockierendes CSS und blockierende Schriften liegen oberhalb beider Metriken, dort investierte Arbeit ist nie verschwendet. Ist FCP gut und LCP schlecht, liegt das Problem bei Ihrem größten Element, meist einem unoptimierten Titelbild oder einem, das der Preload-Scanner zu spät entdeckt.

Das Muster, das man erkennen sollte, ist das umgekehrte: ein schlechtes FCP bei akzeptablem LCP. Das heißt, der Browser lag untätig, bevor er überhaupt etwas zeichnete, und holte dann schnell auf, was fast immer eine blockierende Ressource im Head ist und kein Gewichtsproblem. Es ist zudem die billigste der drei Situationen.