LCP optimaliseren, de checklist die je onder 2,5 seconden krijgt

Van de drie Core Web Vitals is Largest Contentful Paint degene die het meeste geld beweegt. LCP meet hoe snel het grootste zichtbare element laadt, meestal de hero-afbeelding of de kop. Te traag, en de bezoeker is weg voordat de pagina compleet is.

De drempel is hard: onder 2,5 seconden is goed, tussen 2,5 en 4 seconden moet beter, boven 4 seconden is slecht. CrUX-data laat zien dat een groot deel van de Nederlandse e-commerce op mobiel boven de 4 seconden zit. Twee keer over de grens.

Dit artikel is geen theorie over waarom snelheid telt. Dat rekenden we al door in wat kost een seconde tragere LCP per jaar. Dit is de checklist om je LCP te verlagen: vier oorzaken, vier oplossingen, op volgorde van impact.

Wat is LCP precies?

Definitie: Largest Contentful Paint meet het moment waarop het grootste content-element in de viewport zichtbaar wordt, gerekend vanaf het begin van het laden. Dat element is meestal een afbeelding, een videoframe of een tekstblok. LCP is sinds 2021 een officiële Google ranking-factor en sinds 2024 een van de drie Core Web Vitals.

LCP is geen losse meting. Het is de optelsom van vier deeltijden:

1. Tijd tot eerste byte (TTFB): hoe snel je server reageert
2. Resource-laadvertraging: hoe lang voordat het LCP-element begint te laden
3. Resource-laadtijd: hoe lang het element zelf duurt om te laden
4. Renderingvertraging: hoe lang voordat de browser het kan tonen

Elke fix hieronder pakt één van deze vier aan. Daarom is de volgorde belangrijk: je repareert de grootste deeltijd eerst.

Hoe meet ik mijn LCP correct?

De grootste fout in performance-werk: vertrouwen op lab-data.

Lighthouse in DevTools meet op een ideale verbinding, op één moment, op jouw machine. Dat is een lab-meting. Wat telt voor ranking en omzet is field-data: echte gebruikers, echte apparaten, echte verbindingen, verzameld in het Chrome User Experience Report.

Het verschil kan factor drie zijn. Een Lighthouse-score van 90 op desktop verbergt soms een field-LCP van 5 seconden op mobiel.

Meet daarom altijd:

• Field-data via PageSpeed Insights of CrUX, niet alleen Lighthouse
• Mobiel én desktop apart, 60 procent van het NL-verkeer is mobiel
• Per pagina-type, niet alleen de homepage, want productpagina's gedragen zich anders

Onze SEO scan trekt de field-percentielen per pagina, geen optimisme-gemiddeldes.

De vier oorzaken, gefixt op volgorde van impact

Trage server-respons (TTFB)

Als je TTFB boven de 800 ms zit, kan geen enkele front-end-truc dat goedmaken. De browser wacht simpelweg op de server.

Fixen:

• Weg van shared hosting. Een verhuizing naar Vercel, Netlify of een goede VPS halveert vaak de TTFB.
• Server-side caching aanzetten (full-page cache, object cache). Bij WordPress is dit de grootste winst.
• Een CDN voor je statische assets, zodat ze dichter bij de bezoeker staan.
• Database-queries op de zwaarste pagina's opschonen.

Dit eerst, omdat het de basislijn voor alles wat volgt verlaagt.

Render-blocking CSS en JavaScript

De browser kan niets tonen zolang hij blokkerende bronnen in de head moet ophalen en verwerken. Elke render-blocking resource schuift je LCP naar achteren.

Fixen:

• Kritieke CSS inline in de head, de rest uitgesteld laden.
• Niet-kritieke JavaScript defer of async geven. Denk aan analytics, chat-widgets, A/B-test-tools.
• Third-party scripts tellen, ieder is een potentiële bottleneck. Verwijder wat je niet gebruikt.
• Ongebruikte CSS verwijderen met een tool als PurgeCSS.

De hero-afbeelding (het LCP-element zelf)

In de meeste gevallen is het LCP-element een afbeelding boven de vouw. Te groot, te laat geladen, verkeerd formaat.

Fixen:

• Converteer naar WebP of AVIF. Een ongecomprimeerde JPG van 2 MB wordt vaak 150 KB zonder zichtbaar kwaliteitsverlies.
• Geef het LCP-element fetchpriority="high" en een preload-hint, zodat de browser het direct ophaalt.
• Zet loading="lazy" nooit op de hero-afbeelding. Lazy-loading hoort bij afbeeldingen ónder de vouw, niet erboven.
• Serveer responsieve formaten via srcset, zodat mobiel geen desktop-afbeelding downloadt.

Client-side rendering

Bouwt de pagina zich pas op nadat een grote JavaScript-bundel is gedownload en uitgevoerd, dan ziet de bezoeker eerst een lege pagina. Dat is de duurste LCP-vertraging.

Fixen:

• Server-side rendering of static generation voor de eerste view, in plaats van alles client-side.
• De JavaScript-bundel splitsen, zodat alleen het kritieke deel eerst laadt.
• Voor zuiver inhoudelijke pagina's: overweeg of een framework überhaupt nodig is. Statische HTML laadt altijd sneller.

In welke volgorde levert het het meeste op?

Begin bovenaan, werk naar beneden, meet na elke stap opnieuw:

1. TTFB onder 800 ms krijgen, want het bepaalt de basislijn
2. Render-blocking wegnemen, want het schuift alles vooruit
3. Hero-afbeelding optimaliseren, want dat is meestal het LCP-element zelf
4. Client-side rendering aanpakken, de zwaarste maar minst voorkomende oorzaak

Meet na elke wijziging opnieuw op field-data. Wat in het lab winst lijkt, is het in het veld niet altijd.

Veelgestelde vragen over LCP

Wat is een goede LCP-waarde?

Onder 2,5 seconden is goed, tussen 2,5 en 4 seconden moet het beter, boven 4 seconden is slecht. Google meet de waarde op het 75e percentiel van je echte bezoekers, op mobiel én desktop apart.

Wat veroorzaakt een trage LCP?

Vier oorzaken, in volgorde van impact: een trage serverrespons (TTFB), render-blocking CSS en JavaScript, een te grote of te laat geladen hero-afbeelding, en client-side rendering die de pagina pas na een groot JavaScript-bundel opbouwt.

Wat is het verschil tussen lab-data en field-data?

Lab-data (Lighthouse) meet eenmalig op een ideale verbinding op jouw machine. Field-data (CrUX, PageSpeed Insights) meet echte bezoekers op echte apparaten. Voor ranking en omzet telt alleen field-data, en het verschil kan factor drie zijn.

Telt LCP mee voor de Google-ranking?

Ja. LCP is sinds 2021 een officiële ranking-factor en sinds 2024 een van de drie Core Web Vitals waarop Google de paginakwaliteit beoordeelt.

Hoe meet ik mijn LCP zonder tools te installeren?

Via PageSpeed Insights vul je je URL in en krijg je de field-LCP per pagina, gesplitst naar mobiel en desktop. Onze SEO scan doet dit per pagina en koppelt de waarde direct aan een geschatte EUR-impact.