Mark HagendijkIedere website is opgebouwd uit veel verschillende elementen zoals afbeeldingen, tekst, widgets en nog veel meer. Het aantal elementen bepaalt hierin hoelang het duurt voordat alle content is geladen. Largest Contentful Paint meet de tijd totdat de website klaar is met laden van bepaalde elementen en beschikbaar is voor interactie.
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.
Inhoud
Largest Contenful Paint (LCP) is een zogenaamde Core Web Vital wat ontwikkeld is door Google. De focus van Google ligt hiermee op de gebruikerservaring van websites. Er zijn 3 metrics waarmee Google de gebruikerservaring meet: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) en First Input Delay (FID). Google heeft bevestigd dat deze Core Web Vitals steeds meer van belang zijn en meewegen als ranking factor.
Wat is Largest Contentful Paint (LCP)?
Het belangrijkste element, wat vaak het gedeelte is met de meeste content, vertegenwoordigt de LCP voor een specifieke pagina. LCP is dus de tijd die een website nodig heeft om het element met de meeste content weer te geven. Het komt dus vaak genoeg voor dat de LCP-score kan verschillen van de algehele laadtijd van je website. Een website heeft bijvoorbeeld 3 seconden nodig om volledig te laden, terwijl de LCP laadtijd slechts 2 seconden is.
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.
Largest Contenful Paint heeft veel raakvlakken met First Contentful Paint (FCP). De FCP-score geeft aan hoelang het duurt voordat het eerste element met content wordt weergegeven. Deze statistieken samen kunnen een goed beeld geven over de laadtijd en prestaties van je WordPress website.
Hoe kan je LCP meten?
Het is vrij eenvoudig om te bepalen welk element op je pagina het LCP gedeelte is. In de meeste gevallen is er één afbeelding of tekst-blok wat boven de rest uitsteekt. Het gedeelte van de pagina die de langste laadtijd nodig heeft is op dat moment de LCP. Met de Chrome Developer Tools kan je erachter komen welk gedeelte dat is:
- Start Google Chrome en open de URL van de webpagina die je wilt meten
- Start het hulpprogramma voor ontwikkelaars met Ctrl + Shift + i
- Kies de tab ‘Performance‘ en klik op de Reload button:
- Wacht tot Chrome Developer Tools klaar is met het laden.
- Zoek de timing met het label “LCP”. Op het moment dat je met je muiscursor over het label “LCP” gaat zal het betreffende element in de browser oplichten.
- Voor meer informatie over het element kan je op het “LCP’ label klikken. Je ziet dan uitgeschreven om wat voor soort element het gaat, bijvoorbeeld een afbeelding.
Nu het LCP element is geïdentificeerd kan je het element gaan optimaliseren. Denk hierbij aan het comprimeren van de afbeeldingen, het verwijderen van onnodige opmaak, opschonen van witruimte en code in JS en CSS bestanden maar ook het vermijden van render blocking.
Na het optimaliseren van het betreffende element kan je opnieuw beginnen met het vinden van het volgende element. Voorwaarde daarvoor is dat de LCP tijd van het volgende element lager is dan de nieuwe LCP tijd van het oude element. Volg je het nog?
Afbeeldingen optimaliseren
Zorg ervoor dat afbeeldingen voldoende gecomprimeerd zijn. Er zijn verschillende tools en plugins beschikbaar om afbeeldingen te optimaliseren. Voor LCP-optimalisatie is het aan te raden dat afbeeldingen niet (of zo min mogelijk) geschaald geladen worden. In de praktijk zijn “retina” afbeeldingen een uitzondering. Hierbij worden afbeeldingen van twee keer de rendered grootte ingeladen waardoor deze ook op beeldschermen met een hoge DPI er scherp uitzien.
Langzame server response
Sommige LCP issues worden veroorzaakt voor een trage server response. Met speed audit tools zoals GTMetrix kan je server response tijden gedetailleerd analyseren. Zo kan het gebeuren dat je een te hoge Time To First Byte (Tijd tot eerste byte) hebt waardoor de LCP van het eerst geladen element te hoog is.
Render blocking resources
Render blocking resources zijn CSS en JS bestanden die in de <head> geladen worden en niet tagged zijn als “asynchronous”. Hierdoor moet de browser wachten tot deze resources stuk voor stuk geladen zijn voordat de browser verder gaat met het renderen van de pagina. Met asynchroon laden, worden sommige scripts tegelijkertijd geladen. Deze methode zal er voor zorgen dat bepaalde pagina’s sneller laden. Als een render blocking resource de oorzaak is van een te hoge LCP kan je overwegen om betreffende resource asynchroon te laden of om deze verder op de pagina te laden.
Tot slot
Bij het beoordelen van de websiteprestaties is het goed om je niet alleen te richten op alleen de laadsnelheid. Het is belangrijk om afzonderlijke statistieken zoals LCP te bekijken, en deze specifieke elementen te optimaliseren. De Largest Contentful Paint van een pagina geeft inzicht in de wachttijd voordat de pagina voldoende is geladen. Een geoptimaliseerde LCP geeft een veel betere UX (User eXperience) waardoor de bezoekers langer op je website blijven.
Verdiep je ook eens in de Core Web Vitals. Redelijk technisch, maar zeker de moeite waard om daar aandacht aan te schenken. Hulp nodig? Laat ons live met je meekijken.
Thomas
Roger.Overdevest
Hi Mark,
Leuk artikel! Leuk om te zien dat ik niet de enige Nederlander ben die bezig is met WP optimalisatie. :-)
Ook interessant dat je een heel artikel aan één Core Web Vital besteed. Zie ik niet vaak, maar is absoluut de moeite waard!
In mijn ervaring is het zo klein mogelijk maken van de één van de belangrijkste factoren in het terugbrengen van de LCP.
Dus, i.p.v. async attributen toevoegen aan scripts, ze naar de verhuizen.
Daarnaast kun je voor het async laden van CSS een JS trucje uithalen, maar in plaats daarvan, zou ik ook daarbij het onderscheid maken: wat je nodig hebt above the fold in , de rest naar .
Thanks!
Daan
Beste Daan,
Dank voor de complimenten en toevoegingen! Het is een hele uitdaging om Core Web Vitals te optimaliseren, maar met de juiste tools zeker niet onmogelijk.
Lees ook eens ons artikel over FCP
Groet,
Mark