LCP meet de rendertijd van het grootste element dat zichtbaar is op het scherm bij het laden van een pagina, zonder dat de bezoeker eerst hoeft te scrollen. Dat element is in de meeste gevallen een grote afbeelding, een video-posterafbeelding of een groot tekstblok bovenaan de pagina.
LCP verschilt van First Contentful Paint (FCP): FCP meet wanneer het eerste stukje content verschijnt, LCP meet wanneer het grootste zichtbare element volledig geladen is. LCP geeft daardoor een beter beeld van wanneer de pagina klaar voelt voor de bezoeker.
Google meet LCP via tools zoals Google PageSpeed Insights en Lighthouse. Website-eigenaren vinden hun LCP-score ook in het Core Web Vitals-rapport in Google Search Console.
Waarom is LCP een ranking-signaal bij Google?
LCP is een directe ranking-factor. Google voegde de drie Core Web Vitals in mei 2021 officieel toe aan zijn ranking-algoritme, als onderdeel van de Page Experience-update.
De logica is eenvoudig: een pagina met een slechte LCP laadt traag voor de bezoeker. Google wil geen trage pagina’s aanbevelen. Hoe sneller het grootste element geladen is, hoe beter de gebruikerservaring en hoe meer vertrouwen Google heeft in de pagina.
LCP speelt ook een rol in de mobile-first indexering van Google. Google beoordeelt de mobiele versie van jouw website als eerste. Mobiele verbindingen zijn vaak trager dan desktop, waardoor LCP op mobiel doorgaans groter is dan op desktop.
Wat is een goede LCP-score?
Een goede LCP-score is 2,5 seconden of minder. Boven de 4,0 seconden beschouwt Google de LCP als slecht. Daartussen valt alles in de zone “verbetering nodig.”
Google verdeelt LCP-scores in drie zones:
| LCP-score | Beoordeling door Google |
|---|---|
| 2,5 seconden of minder | Goed |
| 2,5 tot 4,0 seconden | Verbetering nodig |
| Meer dan 4,0 seconden | Slecht |
Een LCP van 4 seconden betekent dat een bezoeker vier tellen wacht voor de hoofdinhoud van jouw pagina zichtbaar is. Op een trage mobiele verbinding duurt dat nog langer. Bezoekers die zo lang wachten, verlaten de pagina vaker voordat ze iets gezien hebben.
Controleer jouw LCP-score via Google PageSpeed Insights. Google PageSpeed Insights toont de huidige score, het specifieke LCP-element en aanbevelingen voor verbetering.
Wat veroorzaakt een slechte LCP-score?
Een slechte LCP heeft bijna altijd één van vijf oorzaken: een te grote hero-afbeelding, lazy loading op het verkeerde element, een trage server, render-blokkerende code of laat ladende lettertypen.
De vijf oorzaken uitgelicht:
- Ongeoptimaliseerde hero-afbeelding: de afbeelding bovenaan de pagina is te groot, in het verkeerde bestandsformaat, of niet voorgeladen.
- Lazy loading op de hero-afbeelding: het
loading="lazy"-attribuut op het grootste zichtbare element vertelt de browser om te wachten met laden. Dat vertraagt de LCP direct. Dit is een van de meest gemaakte technische fouten bij WordPress-websites. - Trage serverreactietijd (TTFB): de server reageert traag voordat de browser ook maar kan beginnen met laden.
- Render-blokkerende CSS of JavaScript: grote stijlbestanden of scripts die de browser dwingen te wachten voor het starten van de weergave.
- Trage weblettertypen: lettertypen die pas laat laden kunnen tekstblokken die als LCP-element tellen vertragen.
Hoe verbeter je de LCP-score?
LCP verbetert het snelst door te beginnen bij het element dat Google als LCP-element aanwijst. Zoek dat element via Google PageSpeed Insights: voer jouw URL in en kijk welk element wordt aangeduid als LCP.
De meest effectieve verbeterstappen:
- Converteer de hero-afbeelding naar WebP: WebP levert kleinere bestanden dan JPG bij vergelijkbare kwaliteit.
- Zet lazy loading uit op de hero-afbeelding: gebruik
loading="eager"of laat hetloading-attribuut weg voor de grootste afbeelding bovenaan de pagina. - Preload de hero-afbeelding: voeg een
<link rel="preload">toe in de HTML-header zodat de browser de afbeelding vroeg begint te downloaden. - Verbeter de serversnelheid: schakel over op snellere hosting of activeer een CDN zoals Cloudflare om de serverreactietijd te verlagen.
- Verwijder of defer render-blokkerende scripts: laad JavaScript en CSS asynchroon via plugins zoals WP Rocket.
Gerelateerde termen
Veelgestelde vragen over Largest Contentful Paint
Wat is een goede LCP-score?
Een goede LCP-score is 2,5 seconden of minder, volgens de drempelwaarden van Google. Een score tussen 2,5 en 4,0 seconden heeft verbetering nodig. Boven de 4,0 seconden beschouwt Google de LCP als slecht. Controleer jouw score via Google PageSpeed Insights of het Core Web Vitals-rapport in Google Search Console.
Welk element bepaalt de LCP?
Het LCP-element is het grootste zichtbare element op een pagina bij het laden, zonder scrollen. Dat is vrijwel altijd de hero-afbeelding bovenaan een pagina, een video-posterafbeelding, of een groot tekstblok. Google PageSpeed Insights toont precies welk element op jouw pagina als LCP wordt gemeten.
Waarom heeft lazy loading invloed op mijn LCP-score?
Het loading="lazy"-attribuut instrueert de browser om een afbeelding pas te laden wanneer de bezoeker ernaartoe scrolt. Als jij dat attribuut zet op de hero-afbeelding bovenaan je pagina, wacht de browser met laden terwijl dat element juist zo snel mogelijk zichtbaar moet zijn. Verwijder lazy loading van de grootste zichtbare afbeelding.
Hoe meet ik de LCP van mijn website?
De makkelijkste manier is Google PageSpeed Insights: voer jouw URL in en de tool geeft direct een LCP-score, het specifieke LCP-element en aanbevelingen. Meer gedetailleerde data vind je in Lighthouse via de Chrome DevTools of in het Core Web Vitals-rapport in Google Search Console.
Is LCP hetzelfde voor mobiel en desktop?
Nee. Google meet LCP apart voor mobiel en desktop. De mobiele score is in de meeste gevallen slechter dan de desktopscore, omdat mobiele verbindingen trager zijn. Google gebruikt de mobiele score als primaire maatstaf, omdat Google de mobiele versie van jouw website als eerste beoordeelt bij de indexering.
Wil je weten hoe jouw website scoort op Largest Contentful Paint? Ik check het via Google PageSpeed Insights en leg je uit wat er aan de hand is. Neem contact op.
