Was ist First Contentful Paint? (FCP)? Ein vollständiger Leitfaden für 2026 - DEUTSCH

Ihre Besucher werden nicht auf eine langsame Website warten. Untersuchungen von Google zeigen, dass die Ladezeit der Seite abnimmt 1 zu 3 Sekunden, Die Absprungwahrscheinlichkeit steigt um 32%. First Contentful Paint fängt den kritischen Moment ein, wenn Benutzer zum ersten Mal etwas anderes als einen leeren Bildschirm sehen.

Schnelle Antwort: Erster zufriedener Anstrich (FCP) ist eine Leistungsmetrik, die misst, wie lange es bis zum ersten Text dauert, Bild, oder SVG erscheint auf dem Bildschirm. Ein guter FCP ist 1.8 Sekunden oder weniger. Während FCP kein direkter Google-Rankingfaktor ist, Es beeinflusst die Wahrnehmung des Benutzers und korreliert mit LCP, was sich auf das Ranking auswirkt.

Zuletzt überprüft: Februar 2026. Informationen anhand der aktuellen web.dev-Dokumentation überprüft.

Was First Contentful Paint tatsächlich misst

FCP verfolgt die Zeit vom Start der Navigation bis zum Rendern des ersten sichtbaren Inhalts durch den Browser. Das könnte Text sein, ein Bild, ein SVG, oder ein nicht weißes Leinwandelement. Hintergrundfarben zählen nicht. Leere Ladespinner funktionieren auch nicht.

Stellen Sie es sich so vor: bevor FCP feuert, Ihr Besucher starrt auf einen weißen Bildschirm und fragt sich, ob etwas kaputt ist. Nach FCP, Sie wissen, dass die Seite geladen wird, und warten eher.

Folgendes passiert, bevor FCP feuern kann:

DNS-Suche → TCP-Verbindung → SSL-Handshake → Serverantwort (TTFB) → HTML-Download → CSS-Analyse → Erste Farbe

Jeder Schritt fügt Zeit hinzu. Aus diesem Grund variiert FCP zwischen Labortests und echten Benutzern. Ihre Testumgebung überspringt die chaotische Realität der DNS-Suche, langsame Mobilfunknetze, und Server unter Last.

Was zählt als “Inhalt” für FCP

• Aus HTML oder Web-Schriftarten gerenderter Text
• Bilder (einschließlich CSS-Hintergrundbildern)
• SVG-Elemente mit visuellem Inhalt
• Nicht weiße Leinwandelemente (Diagramme, Zeichnungen)

Was nicht zählt

• Weiße oder leere Leinwände
• Platzhalter-Hintergrundfarben
• Rahmen (Sie messen ihren eigenen FCP)
• Elemente der Browser-Benutzeroberfläche

Warum FCP wichtig ist (Auch wenn es kein Rankingfaktor ist)

FCP gehört nicht zu den Core Web Vitals von Google. Die eigentlichen Ranking-Signale sind LCP (Größte inhaltliche Farbe), INP (Interaktion mit Next Paint), und CLS (Kumulative Layoutverschiebung). Warum sich also für FCP interessieren??

1. FCP ist der Boden für LCP. LCP kann niemals schneller sein als FCP. Wenn Ihr FCP ist 3 Sekunden, Ihr LCP (das eigentliche Ranking-Signal) ist zumindest 3 Sekunden. Das Beheben von FCP-Problemen behebt normalerweise auch LCP-Probleme.

2. FCP beeinflusst die wahrgenommene Geschwindigkeit. Benutzer beurteilen Ihre Website danach, wie schnell sie sich anfühlt, nicht anhand Ihrer Messwerte. Eine Seite, auf der Inhalte angezeigt werden 1 Zweiter und landet bei 3 Sekunden fühlen sich schneller an als einer, der bis dahin nichts anzeigt 2.5 Sekunden, auch wenn die Gesamtladezeit ähnlich ist.

3. FCP beeinflusst die Absprungraten. Auf diesem leeren weißen Bildschirm entscheiden Benutzer, ob sie bleiben oder gehen möchten. Je länger es dauert, Je mehr Leute auf die Schaltfläche „Zurück“ klicken, bevor Ihr Inhalt überhaupt angezeigt wird.

4. FCP-Konten für 10% Ihres Lighthouse-Scores. Die Lighthouse-Ergebnisse haben zwar keinen direkten Einfluss auf das Ranking, Sie werden in vielen Audits und Leistungsberichten verwendet.

FCP-Score-Schwellenwerte

Google definiert drei Leistungsklassen:

• Gut: 1.8 Sekunden oder weniger
• Verbesserungsbedarf: 1.8 zu 3.0 Sekunden
• Arm: Mehr als 3.0 Sekunden

Darauf kommt es an: du brauchst 75% der Seitenladevorgänge die treffen “gut” Schwelle. Ein schneller Ladevorgang im Glasfaser-Internet gleicht nicht hundert langsame Ladevorgänge im Mobilfunknetz aus.

Für den Kontext, Der durchschnittliche FCP im Internet liegt bei ca 2.5 Sekunden auf Mobilgeräten gemäß HTTP-Archivdaten. Das bedeutet, dass sich die meisten Websites in der befinden “verbesserungswürdig” Zone. Schlagen 1.8 Mit Sekunden sind Sie der Mehrheit voraus.

Die Ergebnisse für Mobilgeräte und Desktops unterscheiden sich erheblich. Mobile Geräte haben langsamere Prozessoren, und Mobilfunknetze erhöhen die Latenz. Eine Website-Bewertung “gut” auf dem Desktop schlägt möglicherweise auf Mobilgeräten fehl. Überprüfen Sie immer beides.

FCP gegen LCP: Was ist der Unterschied?

Beide Metriken messen den Lackierzeitpunkt, aber zu unterschiedlichen Zeitpunkten:

FCP: Wenn Inhalte zum ersten Mal angezeigt werden (sogar nur Ihr Navigationstext).

LCP: Wenn das größte Inhaltselement vollständig geladen ist (normalerweise Ihr Heldenbild oder Ihre Hauptüberschrift).

FCP feuert zuerst. Wenn Ihr Navigationsmenütext bei gerendert wird 0.8 Sekunden, das ist FCP. Wenn Ihr Heldenbild fertig geladen ist um 2.5 Sekunden, das ist LCP.

Der SEO-Unterschied: LCP ist ein Core Web Vital und beeinflusst das Ranking. FCP ist eine diagnostische Kennzahl, bei der dies nicht der Fall ist. Aber da sie viele gemeinsame Ursachen haben, Eine Verbesserung des FCP führt typischerweise zu einer Verbesserung des LCP.

Die aktuellen Core Web Vitals-Schwellenwerte:

• LCP: Gut darunter 2.5 Sekunden
• INP: Gut darunter 200 Millisekunden
• CLS: Gut darunter 0.1

So messen Sie den FCP

Sie benötigen beide Labordaten (kontrollierte Tests) und Felddaten (echte Benutzer). Sie erzählen unterschiedliche Geschichten.

Labortesttools

Google PageSpeed ​​Insights: Geben Sie eine beliebige URL ein und erhalten Sie FCP-Scores für Labor- und Felddaten. Das “Chancen” In diesem Abschnitt erfahren Sie genau, was die Dinge verlangsamt. Kostenlos, Keine Einrichtung erforderlich.

Leuchtturm (Chrome DevTools): Klicken Sie mit der rechten Maustaste auf eine beliebige Seite, Wählen Sie „Inspizieren“., Gehen Sie zur Registerkarte „Leuchtturm“.. Mehr Kontrolle über die Testbedingungen als PageSpeed ​​Insights. Zeigt eine detaillierte Aufschlüsselung dessen, was das Rendern blockiert.

WebPageTest: Erweiterte Tests von mehreren Standorten und Verbindungsgeschwindigkeiten aus. Nützlich für die Diagnose standortspezifischer Probleme.

Felddaten (Echte Benutzer)

Chrome User Experience Report (Kern): Echte Daten von Chrome-Nutzern, die Ihre Website besuchen. Wird in PageSpeed ​​Insights angezeigt, wenn Sie über genügend Traffic verfügen. Dies ist es, was Google tatsächlich für Ranking-Signale verwendet.

web-vitals JavaScript-Bibliothek: Fügen Sie dies Ihrer Website hinzu, um FCP-Daten von jedem Besucher zu sammeln:

importieren {onFCP} von 'web-vitals';

onFCP(metric => {
  // An Google Analytics senden 4
  gtag('Ereignis', 'web_vitals', {
    Metrikname: 'FCP',
    metric_value: metrischer Wert,
    metric_rating: metrische Bewertung
  });
});

Chrome DevTools-Leistungsfenster

Zum Debuggen, Zeichnen Sie einen Seitenladevorgang im Leistungsbereich auf. Auf der Timeline wird FCP mit genau dem gerenderten Bild markiert. Dies zeigt, ob es sich bei Ihrem FCP um sinnvollen Inhalt oder nur um einen Lade-Spinner handelt.

Schnelle Erfolge: Das 80/20 der FCP-Optimierung

Bevor wir zum vollständigen Optimierungsleitfaden kommen, Hier sind Änderungen, die mit dem geringsten Aufwand die größte Wirkung erzielen:

1. Aktivieren Sie die Textkomprimierung. Wenn Ihr Server keine Gzip- oder Brotli-komprimierten Antworten sendet, aktivieren Sie es. Hierbei handelt es sich häufig um eine einzelne Serverkonfigurationsänderung, die die Übertragungsgrößen um ein Vielfaches reduzieren kann 70%+.

2. Schriftartanzeige hinzufügen: Wechseln Sie zu Ihren Schriftarten. Diese eine CSS-Eigenschaft verhindert unsichtbaren Text beim Laden von Schriftarten. Benutzer sehen Systemschriftarten sofort, dann werden Ihre benutzerdefinierten Schriftarten ausgetauscht.

3. Verschieben Sie unkritisches JavaScript. Hinzufügen defer zu jedem Skript-Tag, das nicht sofort ausgeführt werden muss. Dadurch wird verhindert, dass JavaScript den ersten Paint blockiert.

4. Überprüfen Sie Ihr Hosting. Wenn Ihr TTFB (Zeit bis zum ersten Byte) liegt konstant über 600 ms, Keine noch so große Front-End-Optimierung wird Sie zu einem guten FCP führen. Ihr Server muss schneller reagieren. In Betracht ziehen VPS-Hosting wenn Sie Shared Hosting nutzen, oder fügen Sie ein CDN hinzu.

5. Führen Sie PageSpeed ​​Insights aus und beheben Sie das erste Problem “Gelegenheit.” Google sagt Ihnen genau, was Ihre Farbe blockiert. Beginnen Sie mit dem, was die größten geschätzten Einsparungen bringt.

Vollständiger Optimierungsleitfaden

FCP hängt von einer Kette ab: DNS → Verbindung → Serverantwort → HTML-Download → CSS-Analyse → Paint. So beschleunigen Sie jeden Teil.

Reduzieren Sie die Reaktionszeit des Servers (TTFB)

Die Zeit bis zum ersten Byte leistet oft den größten Beitrag zum FCP. Wenn Ihr Server dauert 2 Sekunden zu antworten, Ihr FCP kann unmöglich unter sein 2 Sekunden.

• Verwenden Sie ein CDN (Netzwerk für die Bereitstellung von Inhalten) um von Standorten aus zu bedienen, die näher an den Benutzern liegen
• Aktivieren Sie serverseitiges Caching für Datenbankabfragen und HTML
• Reduzieren Sie Weiterleitungen (Bei jedem wird eine vollständige Hin- und Rückfahrt hinzugefügt)
• Upgraden Sie das Hosting, wenn Ihr Anbieter keine TTFB mit weniger als 200 ms bereitstellen kann

Wenn Sie dabei sind Shared Hosting mit langsamem TTFB, Die günstigste Lösung ist oft Cloud-Hosting mit integriertem CDN.

Beseitigen Sie Render-Blocking-Ressourcen

CSS und JavaScript in Ihrem Dokumentkopf blockieren das Rendern, bis sie heruntergeladen und ausgeführt werden.

• Kritisches Inline-CSS (Stile für „above-the-fold“-Inhalte) direkt in HTML
• Laden Sie unkritisches CSS asynchron
• Hinzufügen async oder defer zu nicht unbedingt erforderlichem JavaScript
• Verschieben Sie JavaScript nach Möglichkeit an das Ende Ihres HTML-Codes

Optimieren Sie die CSS-Bereitstellung

Der Browser muss das gesamte CSS herunterladen und analysieren, bevor er Inhalte zeichnet, auf die sich CSS auswirken könnte.

• CSS minimieren (Entfernen Sie Leerzeichen und Kommentare)
• Entfernen Sie ungenutztes CSS mit Tools wie PurgeCSS
• Vermeiden Sie CSS @import (Jeder fügt einen Netzwerk-Roundtrip hinzu)
• Teilen Sie CSS mithilfe von Medienattributen nach Medientyp auf

Optimieren Sie Web-Schriftarten

Benutzerdefinierte Schriftarten können die Textwiedergabe vollständig blockieren, bis sie heruntergeladen werden.

• Verwenden font-display: swap in @font-face-Regeln
• Laden Sie wichtige Schriftarten vor: <link rel="preload" href="font.woff2" as="font" crossorigin>
• Beschränken Sie Schriftartvarianten (Jedes Gewicht ist eine separate Datei)
• Berücksichtigen Sie Systemschriftarten für den Fließtext

Alles komprimieren und minimieren

• Aktivieren Sie die Gzip- oder Brotli-Komprimierung auf Ihrem Server
• HTML minimieren, CSS, und JavaScript
• Bilder optimieren (WebP oder AVIF, entsprechende Abmessungen)

Verwenden Sie Ressourcenhinweise

Vorverbinden zu Drittanbieter-Domains, die Sie benötigen:

<link rel ="vorverbinden" href ="https://Schriftarten.googleapis.com">

Vorladen kritische Ressourcen:

<link rel ="Vorspannung" href ="kritisch.css" als="Stil">

Sparsam verwenden. Eine Vorabverbindung mit zu vielen Domänen verschwendet Ressourcen.

Vereinfachen Sie Ihr DOM

Groß, Das Parsen von tief verschachteltem HTML dauert länger. Halten Sie Ihre Struktur flach, Vermeiden Sie übermäßige Wrapper-Divs, und Lazy Load Below-the-Fold-Inhalte.

Behebung häufiger FCP-Probleme

FCP variiert zwischen den Tests

Netzwerkbedingungen und Serverantwortzeiten schwanken. Führen Sie mehrere Tests durch und verwenden Sie den Median. Für Felddaten, Überprüfen Sie, ob bestimmte Segmente vorhanden sind (Mobile Benutzer, bestimmte Regionen) schlechtere Ergebnisse anzeigen.

Gute Laborwerte, Schlechte Felddaten

Labortests laufen unter idealen Bedingungen. Echte Benutzer haben langsame Verbindungen, alte Telefone, und überlastete Netzwerke. Vertrauen Sie Felddaten gegenüber Labordaten. Testen Sie mit aktivierter Drosselung in DevTools.

FCP verbesserte sich, aber LCP blieb schlecht

Ihr erster Inhalt könnte geringfügig sein (Navigationstext, Logo) während Ihr Hauptinhalt (Heldenbild) ist immer noch langsam. Überprüfen Sie, was zur FCP-Zeit tatsächlich gerendert wird. Konzentrieren Sie sich bei der Optimierung auf Ihre primären Inhalte.

Skripte von Drittanbietern blockieren Paint

Analytik, Chat-Widgets, und Werbeskripte blockieren häufig das Rendern. Prüfen Sie sie. Verschieben oder entfernen Sie alles Unwesentliche. Erwägen Sie, einige Skripte erst nach Benutzerinteraktion zu laden.

Häufig gestellte Fragen

Ist FCP ein Google-Rankingfaktor??

Nein, FCP hat keinen direkten Einfluss auf die Rangliste. Die wichtigsten Web-Vitals, die sich auf SEO auswirken, sind LCP, INP, und CLS. jedoch, FCP-Probleme bedeuten in der Regel auch LCP-Probleme, da sie dieselben Ursachen haben. Die Korrektur von FCP verbessert häufig Ihre tatsächlichen Ranking-Signale.

Was verursacht einen hohen FCP??

Die häufigsten Ursachen sind langsame Serverreaktionen (TTFB), renderblockierendes CSS und JavaScript, nicht optimierte Schriftarten, und große unkomprimierte Ressourcen. Führen Sie PageSpeed ​​Insights aus, um genau zu sehen, was Ihre Website blockiert.

Was ist ein guter FCP-Score für Mobilgeräte??

Gleiche Schwelle: unter 1.8 Sekunden ist gut, 1.8 zu 3 Sekunden müssen verbessert werden, Über 3 Sekunden ist schlecht. Aufgrund der Netzwerklatenz und der Rechenleistung des Geräts schneiden Mobilgeräte in der Regel schlechter ab als Desktop-Computer. Überprüfen Sie Mobilgeräte separat in PageSpeed ​​Insights.

Wie finde ich heraus, was FCP blockiert??

Nutzen Sie PageSpeed ​​Insights und schauen Sie sich die an “Chancen” Sektion. Für eine tiefergehende Analyse, Das Leistungsfenster von Chrome DevTools zeigt eine Zeitleiste, die genau zeigt, was passiert, bevor FCP ausgelöst wird. Lighthouse markiert auch bestimmte Ressourcen, die das Rendern blockieren.

Beeinflusst das Hosting FCP??

Ja. Ihr Hosting bestimmt TTFB, Das ist oft der größte Teil der FCP-Zeit. Eine langsame Serverantwort bedeutet einen langsamen FCP, Zeitraum. CDN-Dienste kann helfen, indem Sie Inhalte von Standorten bereitstellen, die näher an Ihren Benutzern liegen.

Sollte ich mich auf FCP oder LCP konzentrieren??

Konzentrieren Sie sich auf LCP, wenn Sie nur eines auswählen können, da es das eigentliche Ranking-Signal ist. Die meisten Optimierungen verbessern jedoch beide Kennzahlen. Wenn Ihr FCP gut ist, LCP jedoch schlecht, Das Problem ist Ihr Hauptinhalt (große Heldenbilder, langsam ladende Abschnitte) kein erstes Rendering.

In welcher Beziehung steht FCP zu Core Web Vitals??

FCP ist eine diagnostische Metrik, kein Core Web Vital. Es hilft bei der Identifizierung von Problemen, fließt jedoch nicht in die Ranking-Berechnungen von Google ein. Die drei Core Web Vitals sind LCP (Wird geladen), INP (Interaktivität), und CLS (visuelle Stabilität).

Was als nächstes zu tun ist

Beginnen Sie mit der Messung. Führen Sie Ihre Website jetzt über PageSpeed ​​Insights aus und notieren Sie Ihren FCP-Score sowohl für Mobilgeräte als auch für Desktops. Schauen Sie sich das an “Chancen” Abschnitt für spezifische Empfehlungen.

Wenn Ihr TTFB hoch ist (über 500ms), Adresshosting zuerst. Wenn Ihr Server langsam ist, hilft keine noch so große Front-End-Optimierung. Vergleichen Sie Optionen in unserem Anleitung zum SSD-Hosting oder überlegen Cloud-Hosting mit integriertem CDN.

Wenn TTFB in Ordnung ist, FCP jedoch immer noch langsam ist, Arbeiten Sie die schnellen Erfolge durch: Komprimierung aktivieren, Schriftartanzeige hinzufügen: Tauschen, Verzögern Sie unkritisches JavaScript. Allein diese Änderungen führen oft zu Einbußen bei FCP 30-50%.

Zur laufenden Überwachung, Fügen Sie die Web-Vitals-Bibliothek hinzu, um den tatsächlichen Benutzer-FCP im Laufe der Zeit zu verfolgen. Felddaten verraten Ihnen, wie tatsächliche Besucher Ihre Website erleben, nicht nur, wie es in kontrollierten Tests abschneidet.