First Contentful Paint (FCP) meet het moment waarop de browser het eerste stukje content rendert — tekst, afbeelding, of SVG. Het is een diagnostisch metric (geen Core Web Vital) dat aangeeft wanneer de gebruiker voor het eerst iets ziet op het scherm. Google beschouwt een FCP onder 1,8 seconden als "goed".
Wat is FCP?
FCP markeert de overgang van een wit scherm naar het eerste visuele element. Het verschilt van LCP: FCP meet de eerste content (vaak een loading indicator of navigatie), LCP meet het grootste content-element (de daadwerkelijke pagina-inhoud).
| Score | Waarde |
|---|---|
| Goed | ≤ 1,8s |
| Verbetering nodig | 1,8s – 3,0s |
| Slecht | > 3,0s |
FCP wordt direct beïnvloed door TTFB (serversnelheid), render-blokkerende resources (CSS, JavaScript), en font-loading strategie.
Waarom belangrijk
FCP is het eerste signaal voor de gebruiker dat de pagina laadt. Een lang wit scherm verhoogt het risico op bounce. Hoewel FCP geen Core Web Vital is, correleert het sterk met LCP — een slechte FCP voorspelt bijna altijd een slechte LCP.
Voor CSR-applicaties (Client-Side Rendering) is FCP bijzonder problematisch: de browser moet eerst een groot JavaScript-bundle downloaden en parsen voordat er iets gerenderd kan worden.
Voorbeeld
Verbeter FCP door render-blokkerende CSS te minimaliseren:
<!-- Kritieke CSS inline in de head -->
<style>
body { margin: 0; font-family: system-ui; background: #050505; color: #e8e8ef; }
.hero { min-height: 100vh; }
</style>
<!-- Niet-kritieke CSS asynchroon laden -->
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />
Gerelateerd
- Core Web Vitals: complete gids
- JavaScript SEO: rendering en indexering
- Gerelateerde termen: LCP, TTFB, Core Web Vitals