Wat is FCP
Wat meet First Contentful Paint?
First Contentful Paint, afgekort FCP, is het moment waarop de browser voor het eerst iets van de inhoud van je pagina toont. Dat kan een stuk tekst zijn, een afbeelding of een svg-element. Zolang er niets zichtbaar is, ziet de bezoeker een leeg scherm.
FCP zegt dus of de pagina begint te verschijnen, niet of hij al klaar is. Het is de eerste bevestiging voor de bezoeker dat er iets gebeurt.
Hoe verhoudt FCP zich tot TTFB en LCP?
FCP ligt in de volgorde van het laadproces tussen twee andere momenten. Eerst komt de TTFB, het moment waarop de eerste byte van de server binnenkomt. Daarna moet de browser de HTML verwerken en de eerste inhoud tekenen. Die tekening is de FCP. Later volgt de LCP, het moment waarop het grootste element verschijnt.
- TTFB: hoe snel de server antwoordt, zie wat TTFB is.
- FCP: wanneer de eerste inhoud zichtbaar wordt.
- LCP: wanneer het belangrijkste, grootste element zichtbaar is.
Een goede FCP kan dus samengaan met een trage LCP. Dat gebeurt bijvoorbeeld als de kop snel verschijnt, maar de hero-afbeelding nog ontbreekt. Meer over LCP lees je bij wat LCP is.
Wat is een goede FCP?
Google noemt een FCP van 1,8 seconde of minder goed. Tussen 1,8 en 3 seconden is er ruimte voor verbetering, en boven de 3 seconden is de waarde slecht. Ook dit zijn richtlijnen voor echte bezoekers.
Als de FCP hoog is, ligt het vaak aan de weg naar de eerste inhoud. Een trage server, veel stylesheets die de weergave tegenhouden of een script in de head kan dat veroorzaken. Wat render-blocking betekent en waarom het zo'n effect heeft, lees je bij render-blocking resources.
Veelgestelde vragen
Is FCP belangrijker dan LCP?
Geen van beide is belangrijker. FCP laat zien of de pagina begint te verschijnen, en LCP of het hoofdonderwerp er staat. Voor de ervaring van de bezoeker zijn beide nuttig. Google gebruikt LCP als onderdeel van de Core Web Vitals, FCP niet. Daarom staat LCP in die context meer centraal.
Waarom zie ik een deel van de pagina terwijl de FCP goed is?
Een goede FCP betekent dat er iets is getekend, zoals een stuk tekst of een menu. De rest van de pagina kan dan nog ontbreken. Dat zie je vaak terug in een hoge LCP of een langzaam vullend scherm. Kijk in dat geval naar het watervaldiagram om te zien welk bestand het langst duurt.