Wat telt als inhoud bij FCP?
Als inhoud tellen tekst, afbeeldingen (ook achtergrondafbeeldingen), <svg>-elementen en <canvas>-elementen die niet wit zijn. Zodra een van die elementen in beeld komt, is de FCP bereikt. De rest van de pagina hoeft dan nog niet geladen te zijn.
In de FCP-tijd zit ook alles wat eraan voorafgaat: het afsluiten van de vorige pagina, het opzetten van de verbinding, redirects en de TTFB. Daardoor valt de FCP bij echte bezoekers vaak anders uit dan in een labtest.
Wat is een goede FCP?
| FCP | Beoordeling |
|---|---|
| 1,8 seconden of minder | Goed |
| Tussen 1,8 en 3,0 seconden | Verbetering nodig |
| Meer dan 3,0 seconden | Slecht |
web.dev legt twee grenzen vast: tot en met 1,8 seconden is goed, boven 3,0 seconden slecht. Wat daartussen valt, heeft verbetering nodig. Meet volgens web.dev het 75e percentiel van de paginaweergaven, apart voor mobiel en desktop. Dan haal je het doel voor de meeste bezoekers.
FCP hoort niet bij de drie Core Web Vitals. Het is een ondersteunende meetwaarde, net als TTFB. Allebei helpen ze een trage LCP te verklaren: een hoge TTFB wijst op een trage server, een late FCP vaak op bestanden die de weergave blokkeren.
Voorbeeld: tekst die wacht op een lettertype
Een online tuinmagazine uit Wageningen ziet in Lighthouse een mobiele FCP van 3,4 seconden. De server reageert snel genoeg. Het probleem zit in de head: een groot CSS-bestand blokkeert de weergave, en de tekst blijft onzichtbaar tot het eigen lettertype binnen is.
De redactie laat de ongebruikte CSS weghalen en zorgt dat de tekst al zichtbaar is tijdens het laden van het lettertype. Dat zijn twee van de adviezen die web.dev voor een snellere FCP geeft. Andere adviezen zijn minder redirects, een snellere serverreactie en minder ongebruikte JavaScript.
Verwar FCP niet met
- LCP (Largest Contentful Paint): het moment dat het grootste zichtbare element in beeld staat. FCP gaat over het eerste stukje inhoud, LCP over de belangrijkste inhoud.
- First Paint (FP): het moment dat de browser voor het eerst iets tekent, zoals een achtergrondkleur. Dat hoeft nog geen inhoud te zijn. FCP komt daarna.
- TTFB: de tijd tot de eerste byte van de server binnen is. Daarna moet de browser de pagina nog opbouwen voordat er iets in beeld komt.
Veelgestelde vragen over FCP
Waar staat FCP voor?
FCP staat voor First Contentful Paint. Het is het moment dat het eerste stukje inhoud op het scherm verschijnt, zoals tekst of een afbeelding.
Wat is een goede FCP?
web.dev noemt 1,8 seconden of minder goed en meer dan 3 seconden slecht. Wat daartussen valt, heeft verbetering nodig.
Is FCP een Core Web Vital?
Nee. De Core Web Vitals zijn LCP, INP en CLS. FCP is een ondersteunende meetwaarde die helpt om een trage LCP te verklaren.