Wat is Largest Contentful Paint (LCP)

De Largest Contentful Paint (LCP) meet de tijd die nodig is voordat het grootste zichtbare element boven de vouw van een pagina wordt geladen. Elementen die pas zichtbaar worden wanneer een gebruiker moet scrollen of het scherm aanraakt, hebben geen invloed op de LCP.

De specifieke inhoud van de LCP kan variëren per pagina. Vaak is het grootste element een afbeelding, video of een blok met tekst.

Om een goede LCP-score te behalen, moet het grootste element van een pagina binnen 2,5 seconden worden geladen. Dit zou dan ook je streefdoel moeten zijn.

Heeft dit al invloed op mijn rangschikking in Google?

Maak je op dit moment geen zorgen. Jouw website is momenteel niet beïnvloed door de Page Experience-update.

Hoewel Google heeft aangekondigd dat pagina-ervaring belangrijk zal zijn, is gemeld dat dit voor 2021 zeker nog geen rol speelt. Verwacht echter wel dat je hier in toenemende mate over zult horen.

Wat je moet weten over Largest Contentful Paint (LCP)

Hopelijk begrijp je nu wat de Largest Contentful Paint inhoudt. Het is nu tijd om het te optimaliseren. Je moet als doel hebben om de LCP binnen 2,5 seconden te laten laden.

Alles tussen de 2,5 en 4 seconden vereist verbetering. Als de LCP meer dan 4 seconden duurt om te laden, wordt dit beschouwd als slechte prestatie, dus dan is er zeker werk aan de winkel.

Het is ook goed om te weten dat het eerste element dat wordt geladen op je website niet noodzakelijk een grote afbeelding is. Tijdens een test zal de LCP steeds veranderen totdat het grootste element daadwerkelijk is geladen.

Hieronder zie je een voorbeeld dat door Google is vrijgegeven:

Op de eerste pagina zie je dat een element is gemarkeerd. Dit element werd als eerste geladen en is daardoor op dat moment het grootste element op de pagina.

Wanneer je naar de andere afbeeldingen kijkt, zie je dat een paar keer een ander element is gemarkeerd als het grootste element. De LCP wordt dus pas bepaald wanneer de pagina volledig is geladen.

Zodra je de LCP van een pagina kent, kun je proberen de laadtijd van dit element te verbeteren.

Hoe kom ik zelf achter de LCP van mijn pagina's?

Er zijn diverse tools beschikbaar waarmee je kunt controleren wat het grootste contentelement op jouw pagina is. De gemakkelijkste methode is om een pagina van jouw website door Google PageSpeed Insights te halen.

Zodra de resultaten zijn geladen, kun je naar beneden scrollen totdat je bij de diagnostische gegevens bent. Daar zul je een sectie tegenkomen met de titel "Largest Contentful Paint". Als je hierop klikt, krijg je de LCP van de pagina te zien.

JavaScript en CSS die de weergave blokkeren

Voor een browser de inhoud van een pagina kan weergeven, wordt eerst de HTML-code doorlopen. Telkens wanneer externe stylesheets of synchrone JavaScript-tags worden gedetecteerd, wordt het lezen van de code onderbroken.

Scripts en stylesheets voorkomen dus dat de inhoud wordt weergegeven, waardoor het langer duurt voordat de belangrijkste content op de pagina van je website wordt geladen.

Om de prestaties van je website te verbeteren, zijn er verschillende maatregelen die je kunt nemen. Zo kun je onder andere CSS en JavaScript comprimeren (minify) en het laden ervan uitstellen, en kritieke CSS inline laden.

Hoewel dit misschien technisch klinkt, zijn er voor WordPress plugins beschikbaar die je hierbij kunnen helpen. Persoonlijk maak ik op Webtalis gebruik van de cache-plugin WP Rocket, waarmee je dergelijke optimalisaties kunt uitvoeren. Het is echter altijd belangrijk om te testen of alles goed blijft functioneren.

Elementen die traag laden

Hoewel de genoemde punten belangrijk zijn voor verbetering, kan de score ook negatief worden beïnvloed als de elementen op de pagina zelf traag laden.

Het is daarom altijd belangrijk om afbeeldingen zo optimaal mogelijk te optimaliseren (zo klein mogelijk in kilobytes). Preload belangrijke bronnen, comprimeer tekstbestanden en vergelijkbare taken. Zorg ervoor dat dit wordt gedaan voor alle elementen die boven de vouw worden geladen.

Rendering aan de kant van de gebruiker

Rendering verwijst in dit geval naar het genereren van de website. Als een website voornamelijk door de browser van de gebruiker moet worden gegenereerd, bijvoorbeeld door JavaScript, kan dit een negatieve invloed hebben op de Largest Contentful Paint (LCP).

Wanneer dit niet is geoptimaliseerd, kan een gebruiker mogelijk niets zien totdat alle belangrijke JavaScript-bestanden zijn gedownload en uitgevoerd.

Het is belangrijk om kritieke JavaScript te minimaliseren en server-side rendering en pre-rendering te gebruiken. Dit optimalisatieproces is vrij technisch en je hebt er vaak weinig directe controle over, omdat het kan worden geïntegreerd via je thema of een plugin.

Daarom is het altijd aan te raden om te controleren hoeveel invloed een plugin heeft op je website door snelheidstests uit te voeren vóór en na het activeren van de plugin.