Het mag ondertussen geen verassing meer voor je zijn dat we in mei te maken krijgen met de Core Web Vitals Google Update. Een van de Core Web Vitals is de Largest Contentful Paint (LCP). In dit artikel vertel ik je meer over LCP, onder andere hoe je deze kunt optimaliseren voor jouw website.
Hier gaan we het over hebben:
Wat is de Largest Contentful Paint?
Google gaat zich met de aankomende Core Web Vitals update richten op drie onderdelen die zij van essentieel belang vinden voor de gebruikerservaring van website bezoekers, namelijk:
- Laden (Largest Contentful Paint)
- Interactiviteit (First Input Delay)
- Visuele Stabiliteit (Cumulative Layout Shift)
De eerste vital, Largest Contentful Paint (LCP), is dus gericht op het laden van de betreffende pagina.
De volgende quote van Google is hierbij van belang:
Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful.
Philip Walton, Enigeer bij Google
Hierin geeft Google namelijk aan dat het bij LCP gaat om waargenomen laadsnelheid. Daarbij geven ze ook aan dat een snellere LCP helpt om de bezoeker de bevestiging te geven dat de pagina bruikbaar is.
Maar wat is die Largest Contentful Paint nou precies? Het antwoord daarop is erg breed. Het is namelijk niet altijd hetzelfde type element. Zo kan de LCP van jouw pagina een afbeelding zijn, een video of een tekstblok.
In de praktijk is de LCP altijd dat element dat het grootst zichtbare is op het scherm.
Bovenstaand voorbeeld, afkomstig van https://web.dev/lcp/, laat met de groene markering zien wat de Largest Contentful Paint is. Hieruit wordt ook meteen duidelijk dat de LCP, tijdens het laden van de betreffende pagina, kan veranderen.
Ook in het volgende voorbeeld, wederom afkomstig van https://web.dev/lcp/, zie je duidelijk dat de LCP veranderd naarmate de pagina laadt.
Wat je in beide voorbeelden ziet is ook direct het verschil tussen de First Contentful Paint (een onderdeel dat we al langer kende) en de Largest Contenful Paint.
Zo kan het mogelijk zijn dat de First Contentful Paint en de Largest Contentful Paint hetzelfde onderdeel zijn, maar dat hoeft dus niet.
Conclusie: De Largest Contenful Paint (LCP) is het grootst zichtbare onderdeel tijdens het laden van een pagina.
Waarom is de Largest Contentful Paint van belang?
Het is belangrijk om te weten dat alle elementen die Google meet (of het nou Core Web Vitals zijn of niet) invloed hebben op de algehele gebruikerservaring van de bezoeker van de betreffende website.
Ook bij de Largest Contentful Paint is het dus zo dat Google er naar streeft iedere website in haar index zo gebruikersvriendelijk mogelijk te krijgen.
Zoals je eerder uit de quote van Google’s Engineer Philip Walton kon opmaken is Google van mening dat een sneller geladen LCP de bezoeker helpt vast te stellen dat een pagina bruikbaar is.
Die beredenering werkt als volgt: het grootste zichtbare element op je pagina zal ook van dusdanig belang zijn. Het is dan dus logisch dat je dit element zo snel mogelijk zichtbaar wilt maken aan de bezoeker.
Conclusie: De Largest Contentful Paint is van belang om de gebruikerservaring van bezoekers te optimaliseren.
Hoe meet je de Largest Contentful Paint?
Allereerst is het goed om de maatstaven van Google te weten wanneer we het over LCP hebben.
Laadt jouw grootst zichtbare element binnen de 2,5 seconden? Dan zit je in het groen en zit je dus helemaal goed. Wanneer jouw LCP tussen de 2,5 en 4,0 seconden zit heb je nog het een en ander te verbeteren en zit je dus in het oranje. Laadt jouw grootst zichtbare element niet binnen 4 seconden dan zit je in het rood en ben je, volgens Google, dus slecht bezig.
Eerder heb ik het in Core Web Vitals meten uitgebreid gehad over het meten van de Core Web Vitals. Hieronder nog een opsomming van hoe je de LCP van jouw website kan meten:
- Met behulp van PageSpeed Insights
- In Google Search Console
- Direct in Chrome met de Web Vitals extensie
Sinds een tijd werkt GT-Metrix ook met Lighthouse (het systeem waar PageSpeed Insights ook mee werkt) en daardoor kunnen zij nu ook de LCP tonen.
Hoe optimaliseer je de Largest Contentful Paint?
Het optimaliseren van de Largest Contentful Paint houdt heel zwart-wit gezien in dat je ervoor zorgt dat het grootst zichtbare element op de pagina sneller laadt.
Google geeft aan dat LCP over het algemeen het meest wordt beïnvloedt door:
- Lange reactietijden van servers
- JavaScript en CSS die de weergave blokkeren
- Laadtijden van resources
Ik kies ervoor om dit artikel niet heel erg diep in te gaan op alle mogelijke manieren. Simpelweg omdat ik het artikel praktisch wil houden. Wil jij nou wel verder de diepte in? Dan adviseer ik je het artikel Optimize LCP van Google door te nemen.
Lange reactietijden van servers
Dit probleem kan onder andere te maken hebben met een lange Time to First Byte. Een oplossing hier zou kunnen zijn om naar betere hosting over te stappen. Daarnaast is het gebruiken van een CDN hier aan te raden. Op die manier kunnen bezoekers de content naar hun browser krijgen vanaf een CDN welke dichter in de buurt is dan de daadwerkelijke server.
Ervaar de snelheid van Savvii
JavaScript en CSS die de weergave blokkeren
Wanneer een browser eerst JavaScript scripts en CSS stylesheets moet lezen voor het kan beginnen aan de Largest Contentful Paint, heeft dit al direct een negatieve impact op je LCP. Zorg er dus voor dat je niet kritieke JavaScript en CSS uitstelt.
Mocht je dit niet handmatig kunnen dan kun je hiervoor bijvoorbeeld WP Rocket gebruiken.
Laadtijden van resources
Vaak zien we een grote afbeelding (ook wel hero afbeelding genoemd) bovenaan een pagina. Dit is dan ook vaak de LCP. Het voordeel van zo’n afbeelding als LCP is dat hij vrij gemakkelijk te minimaliseren is.
Zorg er in eerste instantie voor dat je de afbeelding in de juiste formaten upload. Comprimeer de afbeelding vervolgens met een fotobewerkingsprogramma of een tool als TinyPNG.
Voor overige compressie kun je kijken naar GZip of Brotli.
Conclusie
Om je Largest Contentful Paint te optimaliseren moet je ervoor zorgen dat het grootst zichtbare element zo snel mogelijk (minimaal binnen 2,5 seconden) geladen wordt.
Dit kun je doen door het betreffende element bijvoorbeeld te comprimeren maar ook door ervoor te zorgen dat het sneller geladen wordt (het voorrang geven boven bijvoorbeeld JS scripts en CSS stylesheets).
Heb jij nog tips voor je mede Savvii’ers om hun LCP te verbeteren?
Reactie achterlaten