Alles wat jij moet weten over Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) doet niet bij iedereen direct een belletje rinkelen. Wanneer je een eigen website hebt, is het tegenwoordig belangrijk om hier kennis van te nemen. LCP is namelijk een nieuwe statistiek van Google om de user experience van een site in te schatten.

Heel veel aandacht wordt er nog niet aan LCP besteed. Dat terwijl het steeds meer invloed op je zichtbaarheid in Google krijgt. Recent communiceerde Google dat de LCP in de toekomst een rol gaat spelen bij het bepalen van de ranking van een website. De zoekmachine gaat vanaf 2021 al waarde hechten aan de LCP.

Reden genoeg om ervoor te zorgen dat jouw website een goede LCP-score behaalt. Dit is helaas makkelijker gezegd dan gedaan, zeker wanneer je hier geen kennis van hebt. Om jou op weg te helpen, vertellen we je op deze pagina alles over LCP.

Wat is LCP?

LCP staat voor Largest Contentful Paint. Hiermee wordt aangegeven hoe lang het duurt voordat het grootste element op een pagina aan de bezoeker wordt getoond. Het kan hierbij gaan om een tekstblok, maar ook om een afbeelding of video.

LCP heeft voornamelijk betrekking op het gedeelte van de website boven de zogeheten vouw. Met de vouw bedoelen we het deel dat zichtbaar is zonder te scrollen. Het draait dus om het gedeelte dat direct in beeld komt wanneer je een site bezoekt.

Wanneer je naar op een computer, tablet of smartphone beneden scrolt moet er meestal nieuwe inhoud worden geladen. Dit heeft echter geen effect op de LCP. Het draait namelijk alleen om de tijd die het kost voordat de hoofdinhoud van een pagina geladen is.

H3 Welke elementen zijn van invloed op de LCP-score van een website?
Eerder las je een aantal factoren die een rol spelen bij het bepalen van de LCP-score van een website. Er zijn verschillende onderdelen van een site die de Largest Contentful Paint beïnvloeden.

Om het duidelijk en overzichtelijk te houden, zijn hieronder de belangrijkste elementen met de bijbehorende codering te vinden.

  • Koppen: niet alleen <h1>, maar ook <h2>, <h3>
  • Paragrafen: <p>
  • Opsommingen: <ul>, <li>, <ol>, <dt>, <dl> of <dd>
  • Afbeeldingen: <img>, <figure> en <figcaption>
  • Bepaalde secties op een pagina, waaronder <section>, <footer> en <header>
  • Overige elementen, zoals <form>, <article> en <adress>

Het is niet dat alle tags meespelen bij het bepalen van de LCP van een website. Nee, want er wordt bijvoorbeeld (nog) niet gekeken naar <video>. Heb je video’s op jouw site staan? Dan wordt dit niet meegenomen in de LCP-score van de site.

Zo achterhaal je de LCP van een pagina

Om te voorkomen dat jouw website straks wegzakt in de resultaten, doe je er goed aan naar de LCP van jouw site te kijken. Maar hoe achterhaal je de LCP-score eigenlijk?

Indien je niet bekend bent met Largest Contentful Paint, weet je ongetwijfeld ook niet hoe je achterhaalt wat het grootste element op een pagina is. Hier kun je gelukkig verschillende tools voor gebruiken, waarvan de volgende twee wat ons betreft de beste opties zijn.

Google PageSpeed

Google Pagespeed is de eerste tool die je kunt gebruiken om de LCP van jouw website te achterhalen. Het enige wat nodig is, is het plakken van de URL van je website. Wanneer je vervolgens op ‘analyseren’ klikt, toont de tool jou direct de resultaten.

Onder het kopje ‘Labgegevens’ zie je de LCP-score van jouw site. Je kunt hier ook meteen achterhalen wat de Largest Contentful Paint op jouw site is. Kijk hiervoor onder het kopje ´Diagnostische gegevens´.

Hier staat ´Largest Contentful Paint element´. Wanneer je hierop klikt, ontvouwt zich een veld. In dit veld wordt aangegeven welk element de LCP van jouw website is. Hierdoor weet je direct wat je aan moet passen om de LCP-score te verbeteren.

Lighthouse

Naast Google PageSpeed achterhaal je de LCP van jouw website ook met behulp van Lighthouse. Deze tool bereik je door met de rechtermuisknop op de website te klikken waarvan je de LCP-score wilt achterhalen. Ga vervolgens naar ‘Inspecteren’ en klik rechtsboven in op ‘Lighthouse’.
Let op: het kan zijn dat deze optie achter de twee pijltjes staat.

Nadat je op ‘Generate Report’ hebt geklikt, start Lighthouse met het analyseren van de site. Zodra de resultaten bekend zijn, worden ze getoond. Onder ‘Metrics’ zie je hoe lang het duurt voordat de Largest Contentful Paint op de site geladen is.

Wil je ook achterhalen wat de LCP is? Dat kan door iets lager op ‘View Trace’ te klikken. Je krijgt dan een tijdlijn te zien. Hierin staat een zwart blokje met LCP. Wanneer je hierop klikt, zie je wat de Largest Contentful Paint op de site is.

Wat is een goede LCP-score?

Ondanks dat Google pas volgend jaar naar de LCP score gaat kijken, doe je er goed aan hier nu alvast mee aan de slag te gaan. Voordat je kunt beginnen, moet je weten wat de ideale LCP-score is. Google heeft dit vastgesteld op maximaal 2,5 seconden.

Dit wil zeggen dat het grootste element op jouw website binnen maximaal 2,5 seconden geladen moet zijn. Alleen dan is er sprake van een goede Largest Contentful Paint. Scoort jouw site tussen de 2,5 en 4 seconden of zelfs boven de 4 seconden? Dan wordt het de hoogste tijd om de LCP te optimaliseren.

De gevolgen van een lage LCP-score

Een lage LCP-score kan gevolgen hebben voor de ranking van jouw website in Google. Blijkt uit een test dat de Largest Contentful Paint van jouw site boven de 2,5 seconden ligt? Dan hoef jij je nog niet direct zorgen te maken.

Google kondigde weliswaar aan dat LCP vanaf 2021 een rol gaat spelen, maar het speelt aankomend jaar nog niet mee in het bepalen van de ranking in de zoekmachine. Langzaam maar zeker zal dit wel steeds meer het geval zijn. Daarom kun je beter nu alvast beginnen met de optimalisatie. Op deze manier voorkom je dat je straks de boot mist.

Verbeter de LCP van jouw WordPress-website

Heb je Google PageSpeed of Lighthouse gebruikt om de LCP van jouw WordPress-site te achterhalen? Dan weet je waar het probleem zit. Hierdoor kun je gericht actie ondernemen om de LCP van jouw site te optimaliseren.

Wat je precies moet doen om de LCP te verbeteren hangt af van het element op de pagina. Je kunt de onderstaande aanpassingen doen om de LCP te optimaliseren:

  • Reactietijd van de server versnellen
  • Laadtijd van afbeeldingen versnellen
  • Aantal render-blocking bronnen minimaliseren

De kans is groot dat je zelf geen idee hebt hoe je bovenstaande zaken aanpast. Ga in dat geval niet zelf aan de slag met de optimalisatie van de Largest Contentful Paint. Bij InsideWeb kunnen we je helpen om de LCP-score te optimaliseren. Zo kun jij rekenen op niet alleen een snelle maar ook vindbare website!