Wat is Largest Contentful Paint (LCP) en hoe verbeter je deze?

De gebruikerservaring van een website wordt steeds belangrijker, ook voor de positionering van jouw website in zoekmachines. De Largest Contentful Paint (LCP) is één van de factoren die wordt meegenomen door Google om te bepalen hoe jouw website scoort op het gebied van SEO en gebruikerservaring. Maar wat is Largest Contentful Paint precies en hoe kun je deze verbeteren?

Wat is Largest Contentful Paint?

Vrij vertaald staat Largest Contentful Paint voor de ‘grootste weergave met content’ en dat is eigenlijk precies wat het is. Met de LCP wordt aangegeven hoelang het duurt om het grootste element op een pagina boven de vouw (het zichtbare gedeelte van een pagina zonder dat je hoeft te scrollen) in te laden. Dit is vaak een afbeelding, maar het kan ook een tekstblok zijn of een element met een achtergrondafbeelding. De volgende HTML-elementen zijn hierin het belangrijkst.

• <img>-elementen

• <image>-elementen binnen <svg>

• <video>-elementen (alleen de posterafbeelding)

• Elementen met een achtergrondafbeelding via CSS

• Blokken met tekstinhoud

Google definieert een goede LCP-score als het grootste element van een pagina binnen 2,5 seconden geladen wordt. Is de laadtijd van het grootste element tussen de 2,5 en 4 seconden, dan heeft dit verbetering nodig. Alles boven de 4 seconden wordt gezien als slecht. Streef er daarom naar om het grootste element op een pagina onder de 2,5 seconden te houden.

De LCP is dus pagina-afhankelijk. Elke pagina is anders opgebouwd en heeft andere elementen, en elke pagina heeft ook een eigen, grootste element.

Hoe bepaal ik wat de Largest Contentful Paint op mijn pagina is?

Je kunt de LCP op verschillende manieren en met verschillende tools meten, maar de makkelijkste manier is door een pagina van jouw website door Google PageSpeed Insights te halen. Onder het kopje ‘Diagnostische gegevens’ vind je vervolgens LCP-element (grootste weergave met content). Klik je hierop, dan zie je direct het grootste element van die pagina.

Is de LCP groter dan 2,5 seconden? Dan doe je er goed aan om te kijken of je het element kunt verkleinen om zo de Largest Contentful Paint te verbeteren.

Hoe verbeter ik de Largest Contentful Paint?

Nu je weet wat de Largest Contentful Paint is én hoe je deze zelf kunt meten, wil je natuurlijk ook weten hoe je de LCP kunt verbeteren als deze niet goed scoort. De stappen die je moet zetten om de LCP te verbeteren hangen af van het element dat zorgt voor een slechte LCP.

De laadtijd van afbeeldingen / video’s verbeteren

Vaak zijn het afbeeldingen en video’s in het webdesign die zorgen voor een slechte score van de LCP. Zorg ervoor dat traag ladende elementen zo klein mogelijk zijn in bestandsgrootte. Zorg dat afbeeldingen in het juiste formaat (jpg, png enz.) zijn opgeslagen en dat de afbeeldingen goed responsive zijn. Comprimeer afbeeldingen en overweeg om ze om te zetten naar de modernere WebP-indeling.

De serverreactietijd verkorten

Alle content op een pagina moet opgehaald worden vanaf een server. Hoe korter het duurt om dit op te halen, hoe sneller dit getoond kan worden en hoe beter dit is voor je LCP-score. Zorg er dus voor dat je een goede, snelle en geoptimaliseerde hosting hebt. Overweeg het gebruik van een CDN, zodat je gebruikers nooit hoeven te wachten op netwerkverzoeken van servers op grote afstand van de gebruiker.

JavaScript en CSS-requests optimaliseren

Voordat een browser content kan weergeven op een website, moet het eerst de gehele HTML-code lezen. Tijdens het lezen van de HTML-code zal de browser even pauzeren als het externe stylesheets en (synchroon ingeladen) JavaScript-bronnen tegenkomt. De term hiervoor is render blocking en dit zorgt ervoor dat ook het laden van de LCP wordt uitgesteld en dus langer duurt.

Een oplossing is gebruik maken van inline critical CSS. Dit is CSS die boven de vouw weergegeven wordt, inline inladen en non-critical CSS uitgesteld inladen. Dus alle overige CSS na de vouw inladen. Ook het verkleinen en comprimeren (minifying) van CSS en JavaScript-bestanden kan bijdragen aan een betere LCP-score.

Fonts optimaliseren

Als het LCP-element tekst is, kan het laden van aangepaste lettertypen op een ongeoptimaliseerde manier ervoor zorgen dat het langer duurt voordat die tekst verschijnt. Gebruik systeemlettertypen die niet gedownload hoeven te worden, overweeg het zelf hosten van lettertypen om externe verzoeken te vermijden, en gebruik “font-display: optional” zodat de browser een fallback-lettertype kan tonen als het aangepaste lettertype nog niet is geladen.

Caching implementeren

Caching kan de reactietijd van de server verbeteren door het verwerkingswerk dat je server moet doen voordat hij het voltooide HTML-document kan afleveren aan de browsers van bezoekers te verminderen. Gebruik cachingplugins zoals WP Super Cache of WP Rocket om caching op je site in te schakelen.

Conclusie

De Largest Contentful Paint is een cruciale factor in de gebruikerservaring en SEO van je website. Door aandacht te besteden aan het optimaliseren van afbeeldingen, serverreactietijd, JavaScript en CSS, lettertypen en caching, kun je de LCP-score van je website verbeteren. Een goede LCP-score leidt tot snellere laadtijden, betere gebruikerservaring en hogere posities in zoekmachines.

Wil je hulp bij het optimaliseren van de LCP van jouw website?
Neem dan contact op met Dubbel9 – jouw partner in webontwikkeling en SEO-optimalisatie.