Wat is Largest Contentful Paint (LCP)

Wanneer je jouw website weleens test met Google Pagespeed, dan is het je misschien al opgevallen dat er sinds mei 2020 nieuwe dingen gemeten worden.

Google is bezig om de pagina-ervaring van een gebruiker als belangrijke metriek te gaan hanteren om websites te positioneren in de zoekresultaten.

In dit artikel gaan we het hebben over de Grootste Weergave met Content score. In het Engels wordt dit Largest Contentful Paint (LCP) genoemd.

Wat is Largest Contentful Paint?

De Grootste Weergave met Content meet hoelang het duurt voordat het grootste element boven de vouw van een pagina geladen wordt. Elementen die pas zichtbaar zijn wanneer een gebruiker moet scrollen of het scherm aanraakt hebben geen invloed op de LCP.

Het zal per pagina verschillen wat de LCP precies is. Vaak zal het grootste element een afbeelding, video of een blok met tekst zijn.

Om een goede LCP score te halen zal het grootste element van een pagina binnen 2,5 seconden geladen moeten worden. Dit zal dan ook het doel voor je moeten zijn.

Heeft dit nu al effect op mijn positie in Google?

Maak je op dit moment geen zorgen. Jouw website is op dit moment niet door de Page Experience update geraakt.

Toen Google kenbaar maakte dat pagina-ervaring een belangrijk gegeven zal zijn, is er ook gemeld dat het voor 2021 zeker nog geen factor is. Wel zal je dus steeds meer hierover horen.

Mocht je interesse hebben in meer informatie over wat Google zelf precies heeft gezegd. Bekijk dan dit artikel op de Webmasters blog van Google.

Wat je moet weten over Largest Contentful Paint (LCP)

Hopelijk begrijp je ondertussen wat de Largest Contentful Paint is. Het is nu tijd om het te optimaliseren. Je moet als doel hebben om de LCP binnen 2,5 seconde geladen te hebben.

Alles tussen de 2,5 en 4 seconden heeft verbetering nodig. Wordt de LCP boven de 4 seconden geladen? Dit wordt als slechte performance gezien, dus dan is er zeker werk aan de winkel.

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

Hieronder kun je een voorbeeld zien die Google heeft vrijgegeven:

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

Wanneer je nu de andere afbeeldingen bekijkt zie je dat er een paar keer een ander element is gemarkeerd is als grootste element. De LCP wordt dus pas bepaald als de pagina helemaal geladen is.

Zodra je weet wat de LCP van een pagina is, kun je je best doen om de laadtijd van dit element te verbeteren.

Hoe kom ik zelf achter de LCP van een pagina?

Er zijn verschillende tools waarmee je kunt controleren wat de grootste weergave met content van jouw pagina is. Het makkelijkst is om een pagina van jouw website door Google PageSpeed te halen.

Wanneer de resultaten geladen zijn kun je naar beneden scrollen tot je bij de Diagnostische gegevens bent. Je zal hier een kopje met Largest Contentful Paint element tegenkomen. Wanneer je hierop klikt krijg je de LCP van de pagina te zien.

Op mijn homepage gaat het in dit geval om een <div> element. Wanneer ik het div element bekijk wat staat aangegeven, zie ik al direct dat dit om de achtergrondafbeelding gaat van deze div. Dit is inderdaad het grootste element van de pagina.

Snelheid Largest Contentful Paint optimaliseren

Ik kan mij heel goed voorstellen dat je graag wilt weten hoe je de snelheid van het grootste element van de pagina kunt verbeteren.

Google geeft aan dat bij een slecht score voor de LCP, de meeste problemen worden veroorzaakt door:

  • Trage serverreactietijd
  • JavaScript en CSS die de weergave blokkeren
  • Traag ladende elementen (afbeelding, video, etc)
  • Rendering aan de cliëntkant

Trage serverreactietijd

Hoe langer het voor een browser duurt om content van de server te ontvangen, hoe langer het duurt voordat er iets getoond wordt op het beeldscherm van een bezoeker. Een snellere serverreactietijd zal dus direct de laadtijd van een pagina verbeteren en dus ook de Largest Contentful Paint.

Dingen die je kunt doen om de serverreactietijd te verbeteren zijn:

  • Optimaliseer je server (of neem meer vermogen). Goede WordPress hosting is belangrijk.
  • Maak gebruik van een CDN
  • Schakel caching in
  • Serveer de cache van HTML pagina’s eerst
  • Maak vroegtijdig connectie met scripts van derden (preconnect)

JavaScript en CSS die de weergave blokkeren

Voordat een browser de inhoud van een pagina kan genereren gaat het eerst de HTML code langs. Iedere keer wanneer er externe stylesheets of synchrone JavaScripts-tags gespot worden, zal er even gepauzeerd worden met het lezen van de code.

Scripts en stylesheets blokkeren dus dat de inhoud getoond wordt, waardoor het langer duurt voordat de grootste weergave met content wordt geladen op de pagina van je website.

Om je website te verbeteren kun je van alles doen. Zo kun je onder andere CSS en JavaScript verkleinen (minify) en uitstellen wanneer het geladen wordt en kritieke CSS inline laden.

Het klinkt allemaal wat technischer, maar voor WordPress zijn er plugins die je hierbij kunnen helpen. Zelf maak ik op Webtalis gebruik van de cache plugin WP Rocket. Hiermee kun je dit soort dingen regelen. Wel moet je altijd testen of alles goed blijft functioneren.

Traag ladende elementen

Hoewel bovenstaande punten heel belangrijk zijn om te verbeteren, kan de score ook negatief beïnvloed worden als de elementen op de pagina zelf traag geladen worden.

Het is dus altijd zaak om je afbeeldingen zo goed mogelijk te optimaliseren (zo klein mogelijk in kb’s maken). Preload belangrijke resources, comprimeer tekstbestanden en dat soort zaken. Doe dit voor alle elementen die boven de vouw geladen worden.

Rendering aan de kant van de gebruiker

Rendering staat in dit geval voor het genereren van de website. Wanneer je een website hebt die voornamelijk gegenereerd moet worden aan de kant van de gebruiker door bijvoorbeeld JavaScript, dan zal dit een negatief effect hebben op de LCP.

Wanneer dit niet geoptimaliseerd is, zal een gebruiker wellicht niks zien totdat alle kritieke JavaScript bestanden gedownload en uitgevoerd zijn.

Het is zaak om kritieke JavaScript te minimaliseren, je kunt het best server-side rendering gebruiken en pre-rendering. Dit gedeelte optimaliseren is behoorlijk technisch en je hebt er eigenlijk weinig invloed op, aangezien het in je website zal sluipen door je thema of een plugin.

Het is daarom altijd raadzaam om te controleren hoeveel invloed een plugin op je website heeft door een snelheidstest voor en een snelheidstest na het activeren van een plugin te doen.

Wil je leren hoe je websites sneller maakt?

WordPress website sneller maken

Wil je leren hoe je een WordPress website sneller kunt maken? Kijk over mijn schouder mee hoe je dit kunt doen in de WordPress Snelheid Optimalisatie training.

Tot slot

Voor de verandering geeft Google je ruim de tijd om de pagina-ervaring van je website te verbeteren voordat de algoritme update wordt uitgevoerd.

Wil je meer informatie over dit onderwerp, bekijk dan zeker ook de documentatie over LCP en een uitgebreide Engelse uitleg over hoe je alles kunt verbeteren.

LCP is overigens onderdeel van de nieuwe site-vitaliteit richtlijnen die Google bekijkt. Je hebt ook nog Cumulative Layout Shift (CLS en First Input Delay (FID). Daarover vertel ik je wellicht in een later artikel.

4 reacties Laat een reactie achter

  1. Hi Maikel,
    Bedankt voor je nieuwsbrief. Het is me alleemn nog niet helemaal duidelijk hoe Google te werk gaat. Maar ik heb nog tijd.
    Iets anders:
    Heb jij misschien ook een artikel over een blog maken met SEO?

  2. Hoi Maikel,
    Dank voor de nieuwsbrief over Nieuwe Google ranking factor in 2021.

    Vraagje, wanneer ik de Google PageSpeed test is de LCP score voor desktop 1,0 s en voor mobiel 3,8 s en ben benieuwd welke score voor Google leading is?

    In afwachting van je reactie.
    Groetjes,

    Ad

    • Goede vraag! Google kan op mobiel en desktop andere resultaten geven, dus het is zaak om beide op orde te hebben.

      Aangezien mensen steeds meer via smartphones doen, is Google wel bezig met een mobile-first index (of zelfs nu aan het uitrollen). Ik zou mij dus met name focussen op mobiel. Wanneer deze op orde is, zit je met desktop sowieso altijd goed.

Geef een reactie