Performance8 min lezen

Wat is Largest Contentful Paint (LCP)?

Door Merel Mensink op zondag, 9 januari, 2022

Wat is Largest Contentful Paint (LCP)?

In dit artikel

Largest Contentful Paint (LCP) is een belangrijke meeteenheid die betrekking heeft op laadsnelheid. De LCP meet de rendertijd die nodig is om het grootste element op een pagina volledig in te laden. De focus ligt hierbij op de content die boven de vouw (above the fold) zichtbaar is. Op de meeste websites zijn de grotere elementen afbeeldingen of video’s. De Largest Contentful Paint is onderdeel van de Google Core Web Vitals en is één van de drie onderdelen die Google gebruikt bij het bepalen van de gebruikerservaring op een pagina. Het verschilt per pagina welk element dit is. Soms is het een afbeelding en andere keer is het een video of een titel.

In onderstaande afbeelding van Google zie je goed hoe de LCP kan veranderen tijdens het inladen van een pagina. Google ziet in de eerste vier dia’s de titel als LCP maar daarna wordt er nog een afbeelding ingeladen, die dan als Google gezien wordt als LCP. Hoe langer het duurt voordat de LCP is ingeladen, des te lager is je score.

Wat is een goede LCP?

Je krijgt dus een score die betrekking heeft op je LCP. Maar wat is dan een goede en wat is een slechte score? En wat kun je uiteindelijk met deze scores? Laten we daar eens naar kijken.

Google hanteert op dit moment een maximum van 2,5 seconden voor een ‘goede’ score voor je LCP. Alles hierboven heeft verbetering nodig. Boven de 4 seconden scoor je zelfs ‘slecht’ en is er absoluut werk aan de winkel. Google kijkt dan naar de 75% regel. Dit houdt in dat als 75% van de page views een LCP van 2 seconde heeft, dan krijg je een ‘goede’ score. Echter, als 75% van de page views een LCP hebben van 5 seconden, dan krijg je een slechte score toebedeeld. Google heeft voor deze 75% treshold gekozen zodat outliers de score uiteindelijk niet beïnvloeden, maar het toch voldoende data heeft voor een correcte meting.

Welke elementen hebben invloed op de LCP?

Er zijn een aantal elementen die direct invloed hebben op de LCP. Zoals beschreven in de Largest Contentful Paint API zijn dat de onderstaande elementen:

<img> elements
<image> elements inside an <svg> element
<video> elements

Hoe meet je LCP?

Goed, we weten nu wat LCP is, welke scores je kunt behalen en welke elementen invloed hebben op deze scores. Maar hoe kom je er nu achter welke elementen op jouw website zorgen voor een hoge of lage LCP score? Om dit goed te begrijpen is het belangrijk om te weten dat je eigenlijk twee manieren hebt om je LCP te meten: via veldgegevens (field data) of labgegevens (lab data). Field data zijn gegevens die gebaseerd zijn op echte bezoeken van je website op basis van ongeveer een maand aan verkeer. Lab test data is gebaseerd op tools zoals je browser die een inschatting maken van wat de users zien.

Field tools

  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • web-vitals JavaScript library

Lab tools

  • Chrome DevTools
  • Lighthouse
  • WebPageTest

Het liefste heb je data die gebaseerd is op echte gebruikersdata. Daarom is de beste manier om de LCP van je website te testen met één van de mogelijkheden die je vind onder de Field Tools.

Wat ook een handige tool is, is de Web Vitals Chrome extensie.

Het fijne hieraan is dat je supersnel inzicht krijgt of je pagina een goede LCP heeft of niet. In bovenstaand voorbeeld is de 3.6 seconden te lang en moet dus een signaal zijn om dieper in te duiken. Dan komen tools waarmee je ook je site speed meet, zoals Page Speed Insights, Chrome DevTools en Lighthouse om de hoek kijken.

Hoe verbeter je je LCP?

Op Web.dev kunnen we lezen dat de LCP vooral beïnvloed wordt door 4 factoren:

  1. Trage reactie van de server
  2. Render-blocking JavaScript and CSS
  3. Resource load times
  4. Client-side rendering

Reactietijd van de server

Punt één is direct één van de meest belangrijke want hoe langer het duurt voordat de browser de content van de server doorkrijgt, des te langer het natuurlijk duurt om deze content weer te geven op het scherm. Een snellere reactietijd van de server zorgt dus direct voor een betere LCP. Een goede manier om de server response tijd te meten is door te kijken naar Time to first byte. Je TTFB kun je verbeteren door o.a. te kijken naar:

  • een betere server
  • een CDN zoals Cloudflare gebruiken
  • caching in te schakelen
  • Third party scripts optimaliseren

Render blocking JavaScript and CSS

Voordat een browser inhoud kan weergeven, moet hij HTML-opmaak parseren in een DOM-structuur. De HTML-parser pauzeert als hij externe stylesheets () of synchrone JavaScript-tags () tegenkomt. Scripts en stylesheets zijn beide zogenaamde ronder blocking bronnen die FCP vertragen, en hierdoor dus ook de LCP. Stel niet-kritieke JavaScript en CSS uit om het laden van de belangrijkste inhoud van je pagina’s te versnellen. Grote CSS-bestanden kunnen ook een enorme vertraging opleveren. Probeer dus op zijn minst de volgende stappen te nemen om dit te optimaliseren:

Bovenstaande elementen zorgen ervoor dat je CSS-bestanden worden verkleind, niet worden ingeladen, of juist op een andere slimme manier worden ingeladen.

Slow resource load times

Afbeeldingen, video’s en andere grote elementen wil je in een optimaal formaat inladen. Vooral de afbeeldingen zijn op de meeste websites de grootste elementen. Denk aan grote header afbeeldingen of bijvoorbeeld productfoto’s. Het is dus belangrijk om kritisch naar deze afbeeldingen te kijken. Zijn ze echt nodig? En zo ja, in welk formaat? Als je ze toch gebruikt, zorg er dan voor dat je ze comprimeert en omzet naar nieuwe standaarden zoals JPEG 2000 of WebP. Een andere aanbeveling om dit punt te verbeteren is door gebruik te maken van preloading. Met preloading kun je de belangrijkste elementen (bij voorkeur boven de vouw) al laten preloaden. Als laatste punt willen we je nog meegeven dat het aan te raden is om je text-bestanden te optimaliseren. Gzip en Brotli kun je hier bijvoorbeeld voor gebruiken. Dit zijn algoritmes die de grootte van je bestanden (HTML, CSS & JavaScript) aanzienlijk verkleinen.

Client-side rendering

Veel sites maken gebruik van JavaScript aan de clientzijde om pagina’s rechtstreeks in de browser weer te geven. Frameworks en bibliotheken, zoals React, Angular en Vue, hebben het gemakkelijker gemaakt om applicaties met één pagina te bouwen. Een potentieel nadeel hiervan kan zijn dat al deze JavaScript als één groot bestand gezien wordt. Belangrijk om hier dus voor te optimaliseren. Dit kun je doen door de volgende maatregelen te nemen:

Het minimaliseren van kritieke JavaScript doe je door JavaScript te verkleinen (minifyen) en ongebruikte niet kritische JavaScript zoveel mogelijk uit te sluiten. Server-side rendering heeft alles te maken met het omzetten van JavaScript naar HTML-bestanden. Zo worden de bestanden niet alleen meer via de client side ingeladen, maar eerst op de server. Dit heeft bovendien weer positieve invloed op je TTFB en TTI. Als laatste kun je dus gebruik maken van pre-rendering. Dit is een afzonderlijke techniek die minder complex is dan server-side rendering en biedt ook een manier om je LCP te verbeteren. Meer over pre-rendering vind je hier.

Heb je verder nog vragen over LCP of andere onderdelen uit het artikel? Neem dan gerust contact met ons op.

Hi! Mijn naam is Dion, Account Manager at Hypernode

Wil je meer weten over Hypernode's Managed E-commerce Hosting? Plan je online meeting.

plan een een-op-een meeting tel:+31648362102

Visit Hypernode at