Welk element telt als LCP?
De browser kijkt alleen naar bepaalde soorten elementen:
- afbeeldingen, ook een afbeelding binnen een SVG;
- video’s, via de posterafbeelding of het eerste beeld;
- elementen met een achtergrondafbeelding via
url(); - blokken met tekst, zoals een kop of alinea.
Chrome slaat elementen over die bezoekers niet als inhoud zien. Denk aan onzichtbare elementen, een vlak dat het hele scherm vult en wazige placeholders. Voor de grootte telt alleen het deel binnen het scherm.
Het grootste element kan tijdens het laden wisselen. Eerst is dat bijvoorbeeld de kop, daarna de grote foto. Zodra de bezoeker tikt, scrollt of een toets indrukt, stopt de browser met meten.
Uit welke delen bestaat de LCP-tijd?
web.dev deelt de LCP-tijd op in vier delen die op elkaar aansluiten. Samen vormen ze de volledige LCP:
- Time to First Byte (TTFB): van het begin van het laden tot de browser de eerste byte van het HTML-document binnen heeft.
- Laadvertraging (resource load delay): van TTFB tot de browser het LCP-bestand begint te laden, bijvoorbeeld de hero-foto.
- Laadduur (resource load duration): hoe lang het laden van dat bestand zelf duurt.
- Weergavevertraging (element render delay): van het einde van het laden tot het element volledig in beeld staat.
web.dev raadt aan om alle vier aan te pakken. Een kleiner bestand verkort de laadduur. Wacht de weergave daarna nog op een script, dan verplaats je de wachttijd alleen naar de weergavevertraging.
Voorbeeld: de hero-foto van een makelaar
Makelaardij Van Dam heeft op elke woningpagina een grote foto bovenaan. Op mobiel staat die foto na 3,4 seconden in beeld. Dat valt in de categorie ‘verbetering nodig’: boven 2,5 seconden, maar niet boven 4.
De foto blijkt op lazy loading te staan (loading="lazy"). Daardoor begint de browser pas laat aan het laden. Volgens web.dev moet je een LCP-afbeelding nooit lazy laden. Haalt de makelaar dat attribuut weg, dan start het laden meteen en daalt de laadvertraging.
Verwar LCP niet met
- FCP (First Contentful Paint): het moment dat er voor het eerst iets van de inhoud in beeld komt. LCP gaat over de belangrijkste inhoud.
- Laadtijd (load-event): oudere metingen zoals load en DOMContentLoaded. Die zeggen weinig over wat de bezoeker op het scherm ziet.
Veelgestelde vragen over LCP
Waar staat LCP voor?
LCP staat voor Largest Contentful Paint. Het meet wanneer het grootste zichtbare element van een pagina in beeld staat. Het is een van de drie Core Web Vitals van Google.
Wat is een goede LCP-waarde?
Een LCP van 2,5 seconden of minder is goed. Daarboven tot en met 4 seconden is verbetering nodig. Boven 4 seconden is de LCP slecht. Als maatstaf geldt het 75e percentiel van alle paginaweergaven.
Telt de servertijd mee in LCP?
Ja. LCP meet vanaf het moment dat de navigatie begint. Ook de tijd voor redirects, het opzetten van de verbinding en het wachten op de server telt mee.