Largest Contentful Paint (LCP): meten, monitoren en verbeteren
by 
LCP meet hoe snel de belangrijkste content op je pagina zichtbaar wordt — een productafbeelding, een video of een groot tekstblok. Snel en relevant: dat is waar het om draait.
Wat is Largest Contentful Paint? #
LCP is een cruciaal onderdeel van Google's Core Web Vitals. Het meet hoe snel een pagina laadt en content weergeeft — twee factoren die direct van invloed zijn op de gebruikerservaring.
Bekijk een voorbeeld van LCP in de praktijk:
In dit voorbeeld is de paragraaf (groen) het grootste pagina-element. Het verschijnt al voordat de afbeeldingen laden, inclusief het logo. Alle andere afbeeldingen zijn kleiner dan de paragraaf, dus de paragraaf blijft het grootste element.
Het kan ook voorkomen dat er later een groter element op het scherm verschijnt terwijl de content laadt. Dat element wordt dan het uiteindelijke LCP-element. Elementen die eerder als LCP zijn aangemerkt, heten LCP-kandidaten.
Zodra een gebruiker met de pagina interacteert via een tik, scroll of toetsaanslag, stopt de browser met het rapporteren van nieuwe LCP-entries. Gebruikersinteractie kan de weergave van de pagina namelijk veranderen.
Welke elementen tellen mee voor Largest Contentful Paint? #
De elementen die in aanmerking komen voor Largest Contentful Paint zijn <img>-elementen, <image>-elementen binnen een <svg>-element, <video>-elementen met een posterafbeelding, elementen met een achtergrondafbeelding en elementen op blokniveau met tekstuele inhoud. Meer elementen, zoals volledige ondersteuning voor <video> en <svg>, worden waarschijnlijk in de toekomst toegevoegd.
Browsers passen ook heuristieken toe om bepaalde elementen uit te sluiten als LCP-kandidaat. Dat gebeurt wanneer de achtergrondafbeelding het volledige scherm beslaat, wanneer een afbeelding niet zichtbaar is (opacity), of wanneer een afbeelding niet als echte content wordt beschouwd (lage entropie).
Het laden van een pagina is een reeks kleine gebeurtenissen die samen de gebruikerservaring bepalen. Bezoekers zoeken naar feedback tijdens het laden: ze willen eerst iets zien zodat ze weten dat de server reageert. Daarna willen ze zo snel mogelijk de relevante content zien. En vervolgens verwachten ze met de pagina te kunnen werken. Deze sleutelmomenten zijn bepalend voor de gepercipieerde prestaties.
Waarom zou je Largest Contentful Paint meten? #
LCP maakt deel uit van Google's Core Web Vitals. Het laden van de pagina en de zichtbaarheid van pagina-elementen bepalen in grote mate hoe prettig een site aanvoelt. Geweldige content bieden is mooi, maar als die content traag laadt, slecht leesbaar is of niet interactief, laat de gebruikerservaring te wensen over.
Kijk eens naar de grootste afbeelding of het grootste tekstblok op een pagina zodra die geladen is. Hoe lang duurt het voordat dat element verschijnt? Dat geeft je al een eerste indruk van je LCP.
Largest Contentful Paint en mobiel #
"Maar ik heb toch een mobiele en een desktopversie van mijn site?" Gezien het belang van Google's mobile-first index is dat niet genoeg. Google gebruikt de mobiele versie van je site primair voor indexering en ranking. Vroeger waren rankings voornamelijk gebaseerd op de desktopversie, maar Google volgt de trends en data van gebruikers.
Mobiel is goed voor meer dan de helft van het webverkeer wereldwijd. Vanaf maart 2023 komt 58,43% van al het websiteverkeer van mensen die een mobiel apparaat gebruiken.
Consumentensites worden doorgaans hoofdzakelijk bezocht via smartphones. Smartphonegebruikers zijn afhankelijk van 4G- of 5G-netwerken. Hoewel die netwerken snel zijn, brengen ze altijd meer latency met zich mee dan WiFi of een bedraadde verbinding. Bovendien kunnen mobiele netwerken niet altijd een volwaardige 4G- of 5G-ervaring bieden, vanwege diverse technische factoren.
Wat is een goede Largest Contentful Paint (LCP) score? #
Streef naar een LCP van 2,5 seconden of minder. Dit doel moet je halen voor het 75e percentiel van paginalaadtijden, uitgesplitst naar mobiel en desktop.
"Ik heb een goede LCP score maar ben niet tevreden met mijn gebruikersverkeer en -gedrag." Dat kan. Als LCP in orde is maar andere technische aspecten van je site verbetering behoeven, zal je LCP score je niet redden.
Zijn afbeeldingen de enige elementen die LCP beïnvloeden? #
Nee. Een veelgehoord misverstand is dat alleen afbeeldingen de LCP score bepalen. Ook video's en bloktekstelementen kunnen het grootste element op een pagina zijn en daarmee de LCP score sterk beïnvloeden.
Hoe meet ik mijn LCP score? #
Google en digitale experts bieden tools om website-eigenaren inzicht te geven in hun LCP. Je meet LCP via zowel lab- als velddata.
De eerste twee leveren "werkelijke metingen" op basis van echte gebruikers (velddata):
De volgende twee bieden "gesimuleerde" LCP scores op basis van labdata:
Hoe verbeter ik de Largest Contentful Paint? #
Bij het optimaliseren van LCP zijn dit de belangrijkste aandachtsgebieden:
- Time To First Byte
- First Contentful Paint
- Omleidingen vermijden
- Render-blocking JavaScript en CSS
- Afbeeldingsoptimalisatie
- Caching
- Lettertypen
- Volgorde van requests
Webperformance-specialisten detecteren problematische elementen en bieden oplossingen. Het optimaliseren van afbeeldingen en het preloaden van pagina-elementen zijn voorbeelden van verbeteringen die de LCP ten goede komen.
Een specialist kan ook:
- De LCP-kandidaat optimaliseren voor zowel desktop als mobiel, zodat overbelasting voorkomen wordt.
- JavaScript beperken of uitstellen.
- Je helpen bij het vinden van een goede hostingprovider.
- Resources die pas later op de pagina nodig zijn uitstellen of lazy loaden.
- De request overhead verminderen.
- 103 early hints inzetten
Largest Contentful Paint en afbeeldingen #
Afbeeldingen zijn met name belangrijk voor e-commerce en nieuwsmedia, vanwege de afhankelijkheid van veel visuele content. Op zulke websites kunnen afbeeldingen het grootste element op een pagina zijn. Los van LCP is het belang van afbeeldingen — om producten te verkopen of verhalen te ondersteunen — niet te onderschatten. Afbeeldingen verdienen volop technische aandacht, voor zowel Google als de bezoeker.
Specialisten comprimeren afbeeldingen, passen formaten aan en bieden afbeeldingen aan in geoptimaliseerde formaten zoals JPEG, PNG, WEBP en AVIF. Sommige zaken zijn buiten je controle, zoals of een klant bij een concurrent koopt. Maar de snelheid van je site kun je wel beheersen. En dat levert een betere gebruikerservaring op.
Voor e-commerce, nieuwssites en websites die sterk leunen op afbeeldingen, is LCP mogelijk het meest kritieke aspect van de Core Web Vitals. Zorg dat de afbeelding zo snel mogelijk wordt geleverd.
Wanneer het LCP-element een <img>-element is en de LCP score niet voldoende is, is het waardevol om de timing op te splitsen in sub-onderdelen: de document-TTFB, de vertraging tussen TTFB en het moment waarop de browser de afbeelding begint te laden, de laadtijd van de LCP-resource, en de tijd tussen het volledig laden en het daadwerkelijk renderen door de browser. Die uitsplitsing maakt duidelijk waar en hoe je de LCP score kunt verbeteren.
Een trage LCP schaadt je online bedrijf #
De technische kant van LCP en Core Web Vitals kan complex overkomen, maar de effecten van het verbeteren van Core Web Vitals zijn voor iedereen begrijpelijk. De belangrijkste reden om aandacht te besteden aan Largest Contentful Paint? Een betere LCP leidt tot meer omzet.
Hogere conversieratio's #
Als je conversieratio's koppelt aan LCP-cohorten, zie je dat de conversie daalt naarmate de LCP langzamer is. Een veel hoger percentage gebruikers koopt iets wanneer de LCP binnen 2 seconden verschijnt. Deze productpagina laat zien dat gebruikers twee keer zo vaak converteren met identieke content als de LCP 2,0 seconden bedraagt in plaats van 5,0 seconden:
Snellere Largest Contentful Paint = lagere bouncepercentages #
Het zal niet verbazen dat bouncepercentages meer dan verdubbelen als je dezelfde LCP-cohorten van 2 en 5 seconden vergelijkt:
Conclusie #
Largest Contentful Paint meet hoe lang het duurt voordat de belangrijkste elementen — tekst of afbeeldingen — zichtbaar zijn. LCP is met name relevant voor e-commerce en nieuwsmedia, maar elke website doet er goed aan meer aandacht te besteden aan Google's Core Web Vitals. Betere Core Web Vitals leiden tot hogere rankings en betere click-through rates. Een geoptimaliseerde LCP zorgt voor tevreden bezoekers en een gezondere omzet.
