Largest Contentful Paint (LCP) meet hoe lang het duurt voordat het grootste zichtbare element in de viewport volledig is geladen. Het is een van de drie Core Web Vitals en het primaire signaal voor laadsnelheid. Google beschouwt een LCP van 2,5 seconden of sneller als "goed".
Wat is LCP?
LCP meet het moment waarop het grootste content-element in de viewport zichtbaar wordt. Dat is meestal een hero-afbeelding, een grote tekst-heading, of een video-poster. Het is niet het moment waarop de hele pagina geladen is, maar het moment waarop de gebruiker het gevoel heeft dat de pagina "er is".
Elementen die LCP kunnen triggeren:
<img>elementen<video>poster-afbeeldingen- Elementen met een CSS
background-image - Blok-elementen met tekst (h1, p, etc.)
Google meet LCP via CrUX (Chrome User Experience Report) op basis van echte gebruikers. De drempelwaarden:
| Score | Waarde | Betekenis |
|---|---|---|
| Goed | ≤ 2,5s | Voldoende snel |
| Verbetering nodig | 2,5s – 4,0s | Merkbaar traag |
| Slecht | > 4,0s | Onacceptabel traag |
Waarom belangrijk
LCP is het meest impactvolle Core Web Vital voor gebruikerservaring. Een trage LCP voelt als een trage site, ongeacht hoe snel de rest laadt. Google gebruikt LCP als onderdeel van het Page Experience-rankingsignaal.
De meest voorkomende oorzaken van een slechte LCP: te grote afbeeldingen zonder compressie, render-blokkerende CSS of JavaScript, trage serverresponse (hoge TTFB), en het ontbreken van preloading voor het LCP-element.
Voorbeeld
Optimaliseer LCP door je hero-afbeelding te preloaden:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
En gebruik moderne afbeeldingsformaten:
<picture>
<source srcset="/hero.avif" type="image/avif" />
<source srcset="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>
Gerelateerd
- Core Web Vitals: complete gids
- Gerelateerde termen: Core Web Vitals, INP, TTFB, FCP