LCP meet de tijd tot de hoofdinhoud geladen is. De hoofdinhoud is het grootste tekstblok of beeld op de pagina. Voor de meeste pagina's is LCP de kritieke meetwaarde, omdat die bepaalt wanneer de pagina nuttig wordt voor de gebruiker.
Een gebruiker komt op de pagina. De pagina begint te laden. De browser downloadt HTML. De browser downloadt CSS. De browser downloadt JavaScript. De HTML wordt weergegeven. CSS past de stijlen toe. JavaScript draait. De hoofdinhoud verschijnt. Dat is de LCP.
Een LCP van één seconde is uitstekend. De gebruiker ziet snel inhoud. Een LCP van drie seconden is traag. De gebruiker wacht. Een LCP van vijf seconden is erg traag. De gebruiker vertrekt.
Wat telt als Largest Contentful Paint
Het grootste element boven de vouw. Meestal een afbeelding of kop. Voorbeeld: een homepage met een heroafbeelding. De heroafbeelding is het grootste element. Het moment waarop die verschijnt, is de LCP.
Voorbeeld: een blogartikel met een kop. De kop is het grootste element. Het moment waarop de kop verschijnt, is de LCP.
Voorbeeld: een productpagina met een productafbeelding. De productafbeelding is het grootste element. Het moment waarop die verschijnt, is de LCP.
LCP loopt vanaf het moment dat de gebruiker op een link klikt (begin van het laden) tot het grootste element verschijnt. Het omvat de tijd om HTML, CSS en JavaScript te downloaden, de afbeelding te downloaden en de pagina weer te geven.
LCP optimaliseren
Doel: een LCP onder 2,5 seconden.
Strategie één: optimaliseer de reactietijd van de server (TTFB). Een snellere server betekent dat de HTML sneller aankomt. De HTML moet er zijn om te kunnen weergeven. Verlaag de TTFB door de server te verbeteren, een CDN te gebruiken en databasequery's te beperken.
Strategie twee: verklein het CSS-bestand. Kleinere CSS downloadt sneller. CSS moet gedownload zijn voordat de pagina wordt weergegeven. Verklein CSS door ongebruikte stijlen te verwijderen, te minificeren en niet-kritieke CSS uit te stellen.
Strategie drie: verklein het JavaScript-bestand. Grote JavaScript vertraagt uitvoering en weergave. Verklein JavaScript door ongebruikte code te verwijderen, grote bestanden op te splitsen en niet-kritieke JavaScript uit te stellen.
Strategie vier: optimaliseer afbeeldingen. Afbeeldingen zijn vaak de grootste elementen (LCP). Verklein het bestand door te comprimeren, moderne formaten te gebruiken (WebP) en de afmetingen te verkleinen.
Strategie vijf: laad kritieke bronnen vooraf (preload). Zeg de browser dat die een kritieke afbeelding of lettertype eerder moet downloaden. De afbeelding downloadt dan tegelijk met de HTML en CSS. Dat verlaagt de LCP.
Een voorbeeld uit de praktijk: LCP van een blogartikel verbeteren
LCP aan het begin: 2,8 seconden.
Analyse: de heroafbeelding van het artikel is het grootste element. De afbeelding is twee megabyte. Het downloaden duurt 1,2 seconden. Het downloaden van de afbeelding is het knelpunt.
Optimalisatie
Comprimeer de afbeelding: van twee megabyte naar 0,5 megabyte. De downloadtijd is nu 0,3 seconden.
Zet om naar WebP: nog kleiner, 0,3 megabyte. De downloadtijd is nu 0,1 seconde.
Preload de afbeelding: de browser downloadt de afbeelding eerder. De afbeelding downloadt tegelijk met de HTML. Dat scheelt 0,2 seconden.
Zet kritieke CSS boven de vouw: de pagina kan eerder worden weergegeven. Dat scheelt 0,3 seconden.
Nieuwe LCP: 1,7 seconden.
2,8 min 1,2 (downloaden afbeelding) plus 0,1 (downloaden gecomprimeerde afbeelding) is 1,7 seconden. Onder het doel van 2,5.
LCP en verschillende paginatypen
Homepage
De heroafbeelding is meestal de LCP. Optimaliseer door de afbeelding te comprimeren, een CDN te gebruiken en te preloaden.
Blogartikel
De kop of de eerste afbeelding is de LCP. Optimaliseer door CSS- en JavaScript-vertraging te verkleinen en lettertypen te preloaden.
Productpagina
De productafbeelding is de LCP. Optimaliseer door de afbeelding te comprimeren en responsive afbeeldingen voor verschillende apparaten te gebruiken.
Afrekenpagina
Het formulier of de knop is de LCP. Optimaliseer door CSS en JavaScript te verkleinen en kritieke bronnen te preloaden.
Verschillende paginatypen vragen om verschillende aanpakken. Weet wat jouw LCP-element is. Optimaliseer dat element.
LCP op mobiel en desktop
Mobiele LCP is meestal trager dan desktop-LCP. Het mobiele netwerk is trager. Mobiele apparaten hebben minder rekenkracht.
LCP op desktop aan het begin: 1,5 seconden. LCP op mobiel aan het begin: drie seconden.
Mobiel is twee keer zo traag. Mobiele gebruikers merken de traagheid sterker.
Optimaliseer eerst voor mobiel. Verklein vooral afbeeldingen (mobiele bandbreedte is beperkt). Verminder JavaScript (mobiele apparaten verwerken het trager). Gebruik mobielvriendelijke formaten.
Verbetering van LCP meten
LCP aan het begin
Meet vóór de optimalisatie.
Optimalisatie doorvoeren
Nieuwe LCP
Meet na de optimalisatie.
Verbetering
LCP aan het begin min nieuwe LCP.
Voorbeeld
Aan het begin 2,8 seconden. Na optimalisatie 1,7 seconden. De verbetering is 1,1 seconde.
Bereken de impact
Een verbetering van 1,1 seconde kan het conversiepercentage met één procent verhogen (afhankelijk van de uitgangssituatie en branche). Bij vijftigduizend bezoekers per maand zijn dat vijfhonderd extra conversies bij een bestelwaarde van 100 dollar. Dat is 50.000 dollar per maand. 600.000 dollar per jaar.
Vergelijk dat met de kosten van de optimalisatie. Kost het 50.000 dollar, dan verdien je het in één maand terug. Uitstekende ROI.
Veelgestelde vragen
Hoe weten we welk element onze LCP is?
Gebruik Google Chrome DevTools. Klik met de rechtermuisknop op de pagina. Kies Inspecteren. Open het tabblad Performance. Neem het laden van de pagina op. DevTools toont het LCP-element. Of kijk in PageSpeed Insights. Lighthouse laat zien welke elementen de LCP zijn. Het Core Web Vitals-rapport in Search Console toont de LCP-elementen op je pagina's ook. Met de websitebouwer van WEMASY kun je dit direct op je website instellen.
Moeten we LCP voor alle pagina's optimaliseren of alleen voor de homepage?
Optimaliseer alle pagina's. Maar kies op verkeer. De homepage is belangrijk, maar productpagina's (voor een webshop) of artikelpagina's (voor uitgevers) ook. Meet de LCP op alle belangrijke pagina's. Begin met de pagina's met het meeste verkeer.
Helpt preloaden altijd voor LCP?
Niet altijd. Preloaden kost bandbreedte. Preload je een onbelangrijke bron, dan gebruik je bandbreedte die een belangrijke bron nodig had. Preload alleen kritieke bronnen (heroafbeelding, kritiek lettertype). Preload geen niet-kritieke bronnen.
Hoe optimaliseren we LCP als de hoofdinhoud dynamisch is (geladen via een API)?
De wachttijd van de API komt bij de LCP op. Verkort de API-reactietijd door de database te optimaliseren, reacties te cachen en een CDN te gebruiken. Toon ook een skeleton screen of plaatsvervangende inhoud terwijl de API laadt. Die verschijnt direct. De gebruiker ervaart de pagina als geladen. De echte inhoud vult het aan. De ervaren LCP is dan sneller dan de echte LCP.
Moeten we lazy loading gebruiken voor het LCP-element?
Nee. Lazy loading stelt een afbeelding uit tot die bijna in beeld komt. Staat de afbeelding boven de vouw (het LCP-element), dan vertraagt lazy loading haar zonder reden. Lazy load alleen afbeeldingen onder de vouw. Laad het LCP-element direct.
Waarin verschilt LCP van FCP (First Contentful Paint)?
FCP is het moment waarop er enige inhoud verschijnt (dat kan kleine tekst zijn). LCP is het moment waarop de hoofdinhoud verschijnt (meestal een grotere afbeelding of kop). FCP komt eerder dan LCP. LCP is belangrijker voor de gebruikerservaring. Verbeter eerst de LCP.