Iedereen die een WordPress website heeft, kan er niet omheen om de Core Web Vitals van Google te bekijken. Een van de drie statistieken in het bijzonder is het waard om nader te bekijken: De Largest Contentful Paint speelt niet alleen een belangrijke rol voor de laadtijd, maar ook voor je Google ranking. Als je wilt weten wat er achter deze metriek zit en hoe je je Largest Contentful Paint kunt verbeteren , ben je hier aan het juiste adres. In dit artikel verduidelijken we alle belangrijke vragen en onthullen we de maatregelen die websitebeheerders kunnen nemen om goede waarden te bereiken.

Wat is de grootste Contentful Paint? 

Wanneer een website wordt opgeroepen, duurt het meestal maar een paar seconden voordat deze volledig is ingesteld in de browser. Onzichtbaar voor de bezoeker vinden er gedurende deze tijd talloze processen plaats. De Largest Contentful Paint (LCP) verwijst naar een van de laatste gebeurtenissen voordat de website volledig is geladen: het beschrijft hoe lang het duurt voordat het grootste element op de pagina volledig is geladen en zichtbaar is . Dit is meestal een blok tekst, een afbeelding of een video.

Dit maakt Largest Contentful Paint een van de belangrijkste statistieken voor de laadtijd van websites. Samen met First Input Delay (FID) en Cumulative Layout Shift (CLS) is het ook een van de Belangrijkste Webgegevensdie Google gebruikt om de gebruikerservaring (pagina-ervaring) te evalueren.

Grootste Contentful Paint vs. Eerste Contentful Paint

Een term die ook vaak wordt gebruikt in verband met laadtijden en websiteprestaties en die gemakkelijk kan worden verward is First Contentful Paint (FCP). Voor een beter begrip maken we daarom nogmaals expliciet onderscheid tussen de twee metrieken:

• De Largest Contentful Paint meet hoe lang het duurt voordat het grootste element, d.w.z. de hoofdinhoud van een pagina, volledig is geladen.
• De First Contentful Paint verwijst naar hoeveel tijd er verstrijkt voordat het eerste element op de pagina wordt weergegeven - ongeacht wat de inhoud is.

Je LCP zal bijna altijd iets hoger zijn dan je FCP omdat de hoofdinhoud meestal niet het eerste element is dat wordt geladen.

Waarom is de Largest Contentful Paint belangrijk?

Je vraagt je waarschijnlijk af waarom je de Largest Contentful Paint zou moeten bekijken? We hebben twee goede redenen voor je. Beide zullen je website (en je bedrijf) aan zichtbaarheid helpen winnen en je conversie verhogen.

1. verbeterde gebruikerservaring

Grootste Contentful Paint is een belangrijke indicator van hoe anderen je website ervaren. Hoewel het je bezoekers meestal niet uitmaakt hoe lang het duurt voordat elk script en element op de pagina volledig is geladen, maken ze zich wel druk om de tijd die ze nodig hebben om de site te gebruiken en de belangrijkste inhoud te bekijken. Ze geven echter wel om de tijd die ze nodig hebben om de site te begrijpen en de belangrijkste inhoud te bekijken.

Als je je website zo optimaliseert dat je LCP zo goed mogelijk is (waarover later meer), zul je je bezoekers een solide gebruikerservaring bieden. Als je ze vijf seconden of langer laat wachten op de hoofdinhoud van je website, zullen ze stuiteren en elders gaan kijken. Zo zijn ze nog lang niet bezig met het downloaden van content, het inschrijven op je kanalen, contact met je opnemen of je producten kopen.

2. geoptimaliseerde Google rankings

Inhoud is en blijft de belangrijkste rankingfactor voor Google. Echter, als twee websites even goed presteren op het gebied van inhoud, gaat degene met de betere Core Web Vitals omhoog in de ranglijst. Dit komt omdat de statistieken door Google worden beschouwd als officiële rankingfactoren. De LCP beïnvloedt de score het meest: In de Google Lighthouse prestatiebeoordeling is de waarde goed voor ongeveer 25 procent.

Dus een solide Core Web Vitals - en vooral een solide LCP - kan je helpen om beter te scoren in zoekmachines.

Hoe meet je de Grootste Contentful Paint

Je kunt je LCP op verschillende manieren meten. Een goed startpunt zijn de tools van Google: de Google Search Console, Google PageSpeed Insights en Lighthouse. Daarnaast biedt WebPageTest goede geavanceerde analysemogelijkheden.

Google Search Console

De Google Search Console geeft je een overzicht van de prestaties van je hele website. Je vindt informatie over de Core Web Vitals via de linker navigatiebalk. Als je het tabblad opent, krijg je een grafisch overzicht van je URL's en kun je relatief snel zien welke URL's problematisch zijn. Deze kun je dan in de volgende stap nader bekijken.

Als je Google Search Console niet hebt ingesteld voor je website, kun je alle informatie ook krijgen via Lighthouse of PageSpeed Insights.

Google PageSpeed Insights

Naast de zuivere LCP waarden geeft Google PageSpeed Insights je ook handige tips en adviezen om de Largest Contentful Paint te verbeteren. Google vertelt je ook welk specifiek element is gebruikt voor de test. Zo kun je meteen zien waar je kunt beginnen met optimaliseren.

Je kunt de tool in drie eenvoudige stappen gebruiken:

1. Bel PageSpeed Insights op.
2. Voer de URL in van de pagina die je wilt controleren.
3. Start de test door op Analyseren te klikken.

Google laat je dan in één oogopslag alle Core Web Vitals zien, zowel voor desktop- als mobiele apparaten. Je moet zeker beide versies bekijken.

Om het Largest Contentful Paint-element te vinden, scroll je naar beneden op de resultatenpagina naar het gedeelte Diagnostics. Daar wordt in de sectie Largest Contentful Paint element het grootste element in de viewport weergegeven.

Let op: Het element kan verschillend zijn voor mobiele apparaten en desktop. Je moet dus ook hier altijd beide controleren.

Vuurtoren

Met Lighthouse kun je de LCP testen en analyseren in je eigen browser. De tool is al geïntegreerd in de Google Chrome ontwikkelaarstools.

Zo ga je te werk in de browser:

1. Open de URL die je wilt controleren (bij voorkeur in een incognitovenster).
2. Open de Chrome Developer Tools (DevTools). De snelste manier om dit te doen is door met de rechtermuisknop ergens op de pagina te klikken en dan in het menu dat opent op Verkennen te klikken.
3. Ga dan naar de Developer Tools en selecteer de tab Vuurtoren.
4. Selecteer of het LCP getest moet worden voor de desktop of de mobiele weergave. Onder Categorieën is een vinkje voldoende voor Prestaties.
5. Start de analyse met een klik op Rapport genereren.

De test duurt 15 tot 20 seconden, afhankelijk van de website. Daarna kun je alle waarden bekijken en evalueren en bijvoorbeeld ook vergelijken met de resultaten uit Search Console (als je dat hebt ingesteld).

WebPageTest

WebPageTest is vooral handig als je de test individueel wilt configureren en dieper wilt ingaan op de prestatieanalyse. Hier kun je ook metrieken definiëren zoals de testlocatie, de verbindingssnelheid of het apparaat zelf in de geavanceerde opties.

De resultaten zijn ook iets uitgebreider met WebPageTest: de tool laat je precies zien hoe je website laadt, welke elementen worden geladen en hoe snel het geheel gaat. Naast de LCP waarden bevat het rapport nog veel meer statistieken, waaronder een watervaldiagram. Wat dit precies is en hoe je het goed kunt analyseren, lees je in ons artikel WordPress optimaliseren: Hoe je je website in 7 seconden analyseert.

Wat is een goede LCP waarde?

Google dicteert zo'n beetje hoe de LCP wordt beoordeeld:

• Een Largest Contentful Paint van minder dan 2,5 seconden wordt als goed en wenselijk beschouwd.
• Waarden tussen 2,5 en 4 seconden zijn nog steeds bevredigend, maar kunnen worden geoptimaliseerd.
• Als de LCP-waarde boven de 4 seconden ligt, wordt het als slecht geclassificeerd en moet het zeker worden verbeterd.

Waar komt een zwakke LCP vandaan? 

De Largest Contentful Paint van elke website kan worden opgesplitst in vier subelementen, die samen de volledige LCP-tijd geven:

• Time to First Byte (TTFB): Dit is de tijd vanaf het verzoek van de gebruiker tot het eerste antwoord van de server, dus tot de eerste geladen databyte. Idealiter zou de TTFB ongeveer 40% van de LCP tijd moeten uitmaken.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Laadtijd bronnen: Deze waarde beschrijft de tijd die nodig is om het LCP element zelf te laden. Omdat dit, net als bij de TTFB, een netwerkverzoek is, kan dit proces ook ongeveer 40 procent van de totale LCP tijd in beslag nemen.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Elk van deze subelementen wordt beïnvloed door andere factoren - de lijst met mogelijke oorzaken voor een zwak LCP is dus praktisch eindeloos. In de meeste gevallen ligt er echter één (of meer) van de volgende vier redenen aan ten grondslag:

• Je server reageert te traag (TTFB).
• JavaScript en CSS blokkeren het laden van de pagina (vertraging bij het laden van bronnen).
• Je hebt veel grote bronnen of visueel veeleisende inhoud op je pagina die er lang over doet om te laden (laadtijd van bronnen).
• Client-side rendering zorgt ervoor dat het langer duurt voordat het LCP element volledig wordt weergegeven (Element Render Delay).

Hoe verbeter je de grootste Contentful Paint

Je weet nu waar de Largest Contentful Paint uit bestaat en waardoor deze slecht kan zijn. Laten we nu eens kijken wat je kunt doen als je de Largest Contentful Paint voor je WordPress website wilt verbeteren. Dit zijn de belangrijkste tips en maatregelen:

Vertrouw op snelle WordPress hosting

De basis voor een goede LCP is een korte laadtijd, of beter gezegd een korte TTFB. Hosting met hoge prestaties kan het verschil maken. Controleer daarom of je huidige hosting je onnodig vertraagt. Zo ja, dan kun je overwegen om over te stappen op een gespecialiseerde managed WordPress hosting die is afgestemd op jouw behoeften.

Als je je website bij Raidboxes host, kun je een allround infrastructuur op maat voor WordPress verwachten die zijn vruchten afwerpt: Na een verhuizing naar onze servers laden WordPress websites meestal tot vier keer sneller - zonder extra optimalisatie.

Caching inschakelen

Als je wilt dat je WordPress website een goede LCP heeft en snel laadt, kun je bijna niet om een fatsoenlijke WordPress caching heen. Het verbetert de reactietijd van de server door veelgebruikte bestanden te cachen en ze de volgende keer sneller op te halen. Je kunt hiervoor een plugin gebruiken of kiezen voor een hosting met server-side caching, zoals Raidboxes biedt.

Renderblokkerende JavaScript en CSS elimineren

Elke website bestaat uit HTML-elementen, JavaScript en CSS. De laatste regelt de presentatie van de website, JavaScript is verantwoordelijk voor de dynamische elementen (bijvoorbeeld animaties of formulieren). Als JavaScript en/of CSS vóór het LCP element worden geladen, hoewel ze nog niet nodig zijn, bemoeilijken en vertragen ze de rendering.

Daarom moet je onnodige JavaScript en CSS verwijderen en de bestanden zo compact mogelijk houden. Je kunt de scripts ook naar beneden verplaatsen of vertragen, zodat ze de hoofdinhoud niet blokkeren. De eenvoudigste manier om dit te doen is met plugins zoals Autoptimize of WP Rocket.

Je kunt meer te weten komen over JavaScript en CSS in ons artikel over het verminderen van CSS, HTML en JavaScript.

Afbeeldingen optimaliseren

Hoe groter de afbeeldingen op je website, hoe groter de kans dat ze een slechte LCP hebben. Daarom moet je je afbeeldingen altijd zo goed mogelijk comprimeren. Zorg er echter wel voor dat het kwaliteitsverlies niet te groot is. Als je kunt bepalen wat je LCP element is en het is een afbeelding, dan kun je specifiek de grootte ervan verkleinen. Op deze manier heeft de browser minder tijd nodig om het te downloaden en wordt je LCP waarde verlaagd.

Wat de perfecte grootte is en in welk formaat je de afbeeldingen moet uploaden, kun je vinden in het artikel WordPress Afbeeldingsmaten: Hoe afbeeldingen werken in WordPress & best practices voor je website. Daarnaast kun je in ons magazine een overzicht vinden van 6 populaire plugins voor beeldcompressie.

Geef prioriteit aan het grootste element

Het grootste element op een pagina moet gemakkelijk te vinden zijn en zo vroeg mogelijk worden geladen. Standaard is dit echter meestal niet het geval met bijvoorbeeld afbeeldingen. Je kunt echter het fetchpriority attribuut gebruiken om de browser aan te geven dat bepaalde elementen met een hogere prioriteit moeten worden opgehaald.

Het zou er zo uit kunnen zien:

<img fetchpriority=“high“ src=“/path/to/hero-image.webp“>

(Opmerking: voeg deze opdracht in WordPress in als een blok "Code" en selecteer HTML onder de blokopties voor "Lang oog"), dan wordt het op de juiste manier opgemaakt

Maar wees voorzichtig: Je moet niet meer dan één of twee beelden voorrang geven, anders verliest het signaal zijn effect. Omgekeerd kun je ook de prioriteit van afbeeldingen verlagen. Dit is bijvoorbeeld handig voor afbeeldingen in carrousel sliders die aan het begin van de pagina staan, maar niet direct zichtbaar zijn aan het begin. Door ze een lagere prioriteit te geven, maak je bandbreedte vrij voor essentiële bronnen.

Conclusie: Reactietijd verbeteren en code optimaliseren

Het komt erop neer dat de Largest Contentful Paint een cruciale factor kan zijn als het gaat om je Google ranking en gebruikerservaring. Het is dus de moeite waard om deze metriek nader te bekijken en te begrijpen.

Hoe meer je je verdiept in de Largest Contentful Paint, hoe duidelijker het wordt dat er een bijna oneindig aantal kleinere en grotere schroeven zijn waaraan je kunt draaien om de LCP te optimaliseren. Sommige daarvan kun je sneller vinden, andere vereisen diepere technische kennis. Dit artikel geeft daarom slechts een eerste overzicht en je kunt je in het begin op twee dingen concentreren:

1. Versnel de reactietijd van je server.
2. Optimaliseer de code van je website zodat het LCP element zo snel mogelijk wordt weergegeven.

De belangrijkste factor voor de reactietijd is je hosting. Met een krachtige WordPress hosting, zoals die we aanbieden op Raidboxes , hoef je je geen zorgen te maken over lange wachttijden tot de server reageert. Het kan dus de moeite waard zijn om over te stappen.