Lernen
First Contentful Paint: Was FCP bedeutet und wie man es verbessert
FCP misst, wann Nutzer erstmals echten Inhalt sehen. Dieser Leitfaden zeigt, was es bremst und welche Fixes Seiten früher sichtbar machen.
Starte ein frisches DomainLens-Audit und nutze den Report als Prioritätenliste.
Was FCP misst
First Contentful Paint (FCP) markiert den Moment, in dem der Browser erstmals echten Seiteninhalt rendert: Text, Bild, SVG oder Canvas. Es ist weder der komplette Seitenaufbau noch das wichtigste Hero-Element, zeigt aber, wie lange Nutzer auf einen leeren Bildschirm schauen.
Ein schnelles FCP schafft Vertrauen, dass die Seite funktioniert. Ein langsames FCP lässt eine Seite kaputt wirken, auch wenn später alles lädt. Deshalb gehört es in ein Performance-Audit, auch wenn Core Web Vitals stärker auf LCP, INP und CLS fokussieren.
Was FCP typischerweise bremst
- Langsame Serverantwort, bevor der Browser das erste HTML erhält.
- Renderblockierendes CSS, das vor der Anzeige geladen und geparst werden muss.
- Synchrones JavaScript im head, das Parsing blockiert.
- Webfonts, die sichtbaren Text verzögern oder während des Ladens unsichtbar machen.
- Schweres HTML, Tag Manager oder Third-Party-Skripte vor kritischem Inhalt.
So verbessern Sie FCP
Beginnen Sie am Anfang der Anfrage. Verbessern Sie TTFB mit Caching, schnellerem Origin, weniger Datenbankabfragen und CDN für statische Assets. Der Browser kann keinen Inhalt malen, den er noch nicht erhalten hat.
Reduzieren Sie dann renderblockierende Arbeit. Inlinen Sie nur das kleinste sinnvolle kritische CSS, laden Sie den Rest sicher asynchron, verzögern Sie nicht kritisches JavaScript und halten Sie above-the-fold HTML schlank. Für Fonts helfen Preload der Hauptschrift und font-display: swap.
Fehler vermeiden
- Nur Bilder optimieren, während CSS und JavaScript den ersten Paint weiter blockieren.
- Analytics, Chat und Anzeigen-Skripte vor dem Rendering laden.
- Custom Fonts ohne Preload oder sichtbare Fallback-Strategie einsetzen.
- Nur Desktop messen, wo langsamer erster Paint leichter verborgen bleibt.
- FCP mit LCP verwechseln und das Hero-Bild fixen, während der leere Bildschirm bleibt.
So validieren Sie den Fix
Starten Sie Lighthouse oder PageSpeed Insights vor und nach der Änderung und vergleichen Sie FCP, TTFB, renderblockierende Ressourcen und Main-Thread-Arbeit. Ein echter FCP-Fix lässt den ersten Text oder die visuelle Struktur früher erscheinen, nicht nur den Score steigen.
Nach dem Deployment starten Sie das DomainLens-Audit erneut und prüfen Mobile zuerst. Wenn Felddaten vorhanden sind, bestätigen Sie, dass Nutzer auf langsameren Geräten und Netzen ebenfalls früher Inhalt sehen.