First Contentful Paint (FCP) is één van de zes statistieken die worden bijgehouden in het gedeelte Prestaties van het Lighthouse-rapport en bij Google PageSpeed Insights.

FCP meet hoe lang het duurt voordat de browser het eerste stuk DOM-inhoud weergeeft nadat een gebruiker de pagina opvraagt.Dit is het moment dat de gebruikter ziet dat iets op het scherm gebeurd.

Performance First Contentful Paint — First Contentful Paint

Snelheid is een bijzonder belangrijke factor voor de rangschikking van websites in de Google-zoekmachine.
WEB.DEV

Wat is een goede WordPress FCP-score?

Volgens Google Core Web Vitals report leidt een langzame website tot een hogere bounce rate.De bounce rate is een belangrijke indicator hoe belangrijk de bezoekers je pagina vinden. Hoe hoger de bounce rate, hoe minder interessant de website of webshop voor de bezoeker is. Dit wordt gebruikt door Google om sites te indexeren.

FCP tijd (in seconden)	Kleurcode
0–1.8	Groen (snel)
1.8–3	Oranje (matig)
meer dan 3	Rood (langzaam)

Hoe wordt de totale prestatiescore bepaald?

In Lighthouse 8 wordt de score door de onderstaande weging bepaald. Met 10% is de First Contentful Paint dus niet het belangrijkste statistiek om mee te beginnen.

Statistiek	Weging
First Contentful Paint	10%
Speed Index	10%
Largest Contentful Paint	25%
Time to Interactive	10%
Total Blocking Time	30%
Cumulative Layout Shift	15%

Hoe is First Contentful Paint te meten?

FCP kan worden gemeten door middel van verschillende gratis tools. De tools meten de snelheid van zowel mobiel als desktop. Dit geeft een goed idee van de gebruikerservaring en rangschikking in de Google zoekmachine.

First Contentful Paint (FCP) in WordPress verbeteren

Zowel de gebruikte template als ook de gebruikte plugins zijn van invloed op de hoogte van de score van de First Contentful Paint in WordPress websites en WooCommmerce webshops.

Met het ICTP Groei onderhouds abonnement wordt de FCP stapsgewijs verbeterd.
ICTP WordPress Onderhoud

1. Zorg dat tekst zichtbaar blijft tijdens het laden van webfonts

Lettertypen zijn vaak grote bestanden die enige tijd nodig hebben om te laden. Sommige browsers verbergen tekst totdat het lettertype is geladen

De eenvoudigste manier om dit te voorkomen is door tijdelijk een systeemlettertype weer te geven. Door font-display: swap in @font-face-stijl op te nemen wordt flash of invisible text (FOIT) voorkomen.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

2. Vooraf laden van webfonts in WordPress

Gebruik <link rel=”preload” as=”font”> om de lettertypebestanden eerder op te halen. In WordPress kan in de functions.php de volgende code geplaatst worden:

add_action('wp_head' , function(){
    echo'
    <link rel="preload" href="font Url" as="font" type="font/woff2" crossorgin>
    ';
});

Het is ook mogelijk een WordPress plugin hier voor te gebruiken:

3. Website caching inschakelen

Wanneer caching is inschakelt, wordt een kopie van de website gegenereerd en aan de volgende gebruikers aangeboden. De server hoeft niet voor elke gebruiker opnieuw de pagina te gegenereerd, Over het algemeen is dit een snelle en gemakkelijke manier om de snelheid van de website of shop direct een boost te geven.

4. Eliminate render-blocking resources

In het gedeelte ‘Mogelijkheden’ van het Lighthouse-rapport worden alle URL’s weergegeven die de eerste de weergave van de pagina blokkeren. Het doel is om de impact van deze blokkerende URL’s te verminderen.

Gebruik media-attribuut voor voorwaardelijke CSS
Gebruik de attributen defer en async JavaScript blocking te voorkomen
Verklein en bundel CSS en JavaScript
Aangepaste lettertypen lokaal laden

Voor Eliminate render-blocking resources zijn verschillende WordPress plugins:

5. Geef afbeeldingen weer in next-gen formaat

Afbeeldingsformaten zoals JPEG 2000, JPEG XR en WebP bieden vaak een betere compressie dan PNG of JPEG. Dit betekent snellere downloads en minder dataverbruik. Vooral voor de mobiele performance score geeft dit een beter resultaat.

WordPress heeft verschillende gratis plugins die afbeeldingen automatisch converteren.