Largest Contentful Paint (LCP)

De Largest Contentful Paint (of LCP) rapporteert hoe lang het duurt voordat het grootste (en daardoor waarschijnlijk belangrijkste) content element wordt weergegeven in de viewport.

De Largest Contentful Paint is onderdeel van Core Web Vitals. Dit houdt in dat Google het (in de nabije toekomst) gaat gebruiken als ranking factor.

Wat is een goede LCP-score?

Om je bezoekers een zo goed mogelijke gebruikservaring te bieden moet je er volgens Google naar streven om binnen 2,5 seconde de Largest Contentful Paint te laten verschijnen.

Verschijnt het grootste element van je pagina pas na 4 seconden? Dan bied je je bezoekers een slechte gebruikservaring (en zal je ook minder goed scoren in Google).

Largest Contentful Paint

LCP-score meten

Er zijn verschillende manieren om de LCP-score van jouw website te bekijken.

Pagespeed Insights

PageSpeed Insights geeft meerdere snelheidsscores, waaronder ook de Largest Contentful Paint. De tool is gratis te gebruiken en je hoeft hiervoor geen account aan te maken. Voer simpelweg de URL in van de webpagina waarvan je de laadtijd wilt meten.

Largest Contentful Paint bekijken in Pagespeed Insights

In de bovenstaande afbeelding zie je dat in:

  • 83% van de laadtijden van deze pagina een goede LCP was gemeten (binnen 2,5 seconden).
  • 9% van de gevallen er ruimte was voor verbeteren (2,5 – 4 seconden).
  • 8% van de gevallen een slechte LCP was gemeten (meer dan 4 seconden).

Google haalt deze gegevens uit de Google Chrome browser.

Het kan ook zijn dat Google nog onvoldoende gegevens heeft. In dat geval krijg je een schatting te zien.

Schatting van de Largest Contentful Paint

Behalve de LCP-score, zie je in Pagespeed Insights ook welk element als grootste wordt beschouwd.

Content met grootste weergave

Google Search Console

Binnen Google Search Console kun je in het linker menu via Optimalisaties >> Site vitaliteit.

De cijfers die je hier ziet verschillen niet met de cijfers van Pagespeed Insights. Het is wel een stuk overzichtelijker. Je hoeft namelijk niet iedere keer een URL in te voeren. Je ziet een compleet overzicht van al je webpagina’s en de LCP-scores.

Andere tools om de LCP te bekijken zijn Lighthouse en WebPageTest.

Largest Contentful Paint optimaliseren

Er zijn verschillende manieren om de LCP van jouw website te verbeteren. Eerder dit jaar gaf Google hier zelf al een webinar over. Deze kun je hieronder bekijken.

De meest voor de hand liggende manieren om de LCP en daarmee de snelheid van je website te verbeteren zijn.

  • Optimaliseer je afbeeldingen. Afbeeldingen worden nog te vaak in een te hoge resolutie op een website geplaatst. Daarnaast worden de afbeelding vaak niet gecomprimeerd en worden er oude bestandstypen (zoals PNG, GIF en JPEG) gebruikt.
  • Zorg voor een snelle webhosting. Over het algemeen betekent een betere webhosting een snellere laadtijd. Het controleren van de Time To First Byte (TTFB) is een goede manier om je hosting te testen.
  • Maak gebruik van lazy load. Met lazy load wordt content pas geladen zodra de bezoeker daadwerkelijk dat deel van de pagina bekijkt.
  • Minify CSS. Het verkleinen van je CSS-bronnen kan de laadtijd aanzienlijk verkorten.

Voor meer (ingewikkeldere) optimalisatietips, zoals het verwijderen van JavaScript/CSS bronnen en server-side rendering raad ik je dit artikel van Google aan.