LCP uitgelegd: zo optimaliseer je het voor SEO

LCP is een cruciale meetwaarde voor gebruikerservaring en een rankingfactor van Google. Wanneer een gebruiker naar je pagina gaat, maakt de totale laadtijd van de pagina hem niet uit. Hij let op het moment waarop hij de hoofdcontent kan zien en kan beginnen te lezen of te interacteren. LCP meet precies dat moment: wanneer het grootste contentelement zichtbaar wordt. Zorg dat je LCP goed is en je pagina voelt snel. Is het slecht, dan voelt je pagina traag, ook al zijn andere meetwaarden prima.

LCP optimaliseren vraagt om een aanpak op drie fronten: de reactietijd van de server (TTFB) verbeteren, bronnen die het weergeven blokkeren wegnemen en afbeeldingen optimaliseren. Elke aanpak pakt een ander knelpunt voor LCP aan. De combinatie levert grote verbeteringen op.

Wat LCP is en hoe het wordt gemeten

Largest Contentful Paint (LCP) is de weergavetijd van het grootste zichtbare contentelement op je pagina. Dat kan een grote afbeelding, video, kop of tekstblok zijn. LCP meet vanaf het moment dat de gebruiker naar je pagina navigeert tot dat element zichtbaar wordt. De LCP-documentatie van Google geeft gedetailleerde technische informatie en optimalisatiestrategieën.

LCP is geen binaire meetwaarde met alleen geslaagd of gezakt. Het is een doorlopende score. Google heeft bepaald dat een LCP onder 2,5 seconden "goed" is, een LCP tussen 2,5 en 4 seconden verbetering nodig heeft en een LCP boven 4 seconden slecht is. Gebruikers vinden pagina's met een LCP onder 2 seconden heel snel. Pagina's met een LCP van 3 tot 4 seconden voelen merkbaar trager. Pagina's met een LCP boven 5 seconden worden vaak verlaten.

LCP verandert tijdens het laden van de pagina naarmate grotere contentelementen verschijnen. Als een enorme afbeelding na 3 seconden laadt, springt de LCP van 1 seconde naar 3 seconden. Dat is belangrijk: je kunt niet alleen de eerste weergavetijd optimaliseren. Je moet ervoor zorgen dat alle grote contentelementen snel laden.

Time to First Byte (TTFB) begrijpen

Time to First Byte (TTFB) is de tijd vanaf het begin van de navigatie tot de server de eerste byte van het HTML-document teruggeeft. TTFB bepaalt de ondergrens voor LCP. Is de TTFB 2 seconden, dan kan de LCP niet beter zijn dan 2 seconden, omdat de browser de HTML nog niet eens heeft ontvangen. De TTFB verlagen is een voorwaarde om de LCP te verlagen.

Een goede TTFB is minder dan 600 milliseconden. Een TTFB tussen 600 en 1800ms heeft verbetering nodig. Een TTFB boven 1800ms is slecht. Is je TTFB traag, richt je dan eerst op serveroptimalisatie. Geen enkele hoeveelheid frontendoptimalisatie kan een trage server compenseren.

Veelvoorkomende oorzaken van een trage TTFB: inefficiënte backendcode, databasequery's of een overbelaste server. Trage hosting zorgt ook voor een hoge TTFB. Shared hosting is vaak extreem traag. Stap over op een VPS of cloudhosting voor betere prestaties. Gebruik een CDN om de TTFB te verlagen door content te leveren vanaf servers dicht bij je gebruikers.

PageSpeed Insights toont je TTFB in het onderdeel "Reactietijd van de server". Als de TTFB een knelpunt is, wordt die als prioriteit gemarkeerd.

Het grootste contentelement vinden

LCP hangt af van wat het grootste contentelement op je pagina is. Bij een blogartikel kan het grootste element een grote hoofdafbeelding zijn. Bij een productpagina kan het een productfoto zijn. Op een nieuwssite kan het een kop van een artikel zijn. Het LCP-element vinden is de eerste stap om het te optimaliseren.

Gebruik Chrome DevTools om het LCP-element te vinden. Open DevTools, ga naar het tabblad Performance, start de opname en laad de pagina opnieuw. Zoek in de opname naar de markering "Largest Contentful Paint". Beweeg de muis erboven om te zien welk element de LCP veroorzaakte. Zodra je het element kent, optimaliseer je het.

Het LCP-element is vaak een afbeelding. Afbeeldingen zijn groot en laden nadat de HTML is verwerkt. Het laden van afbeeldingen optimaliseren heeft voor de meeste sites de grootste impact op de LCP. Afbeeldingen onder de vouw kun je uitgesteld laden (lazy-loading), waardoor de LCP voor content boven de vouw sneller wordt.

Kritieke bronnen vooraf laden (preloading)

Preloading vertelt de browser om al vroeg een bron te downloaden, voordat die nodig is om de pagina weer te geven. Laad je LCP-afbeelding of andere kritieke bronnen vooraf met `` tags in de HTML-head. Zo weet de browser: "begin deze bron meteen te downloaden."

Voorbeeld: `` vertelt de browser om de hoofdafbeelding meteen te downloaden, zonder te wachten tot de CSS is verwerkt. Dat kan de LCP met 100 tot 500ms verlagen, afhankelijk van de grootte van de bron.

Wees voorzichtig met preloading. Te veel bronnen vooraf laden verspilt bandbreedte. Laad alleen de meest kritieke bronnen vooraf (hoofdafbeelding, kritieke lettertypen, essentiële CSS). In de optimalisatiegids van Google voor Core Web Vitals staan best practices voor preloading.

Afbeeldingen optimaliseren voor LCP

Als je LCP-element een afbeelding is, optimaliseer dan de bestandsgrootte en de laadstrategie van de afbeelding. Drie tactieken:

Comprimeer de afbeelding. Gebruik tools als TinyPNG, ImageOptim of Squoosh om te comprimeren zonder kwaliteitsverlies. JPEG-compressie kan de bestandsgrootte 10 tot 40 keer verkleinen. Elke 100KB aan afbeeldingsgrootte voegt op 4G-netwerken 100 tot 200ms toe aan de LCP. Compressie heeft een hoog rendement.

Gebruik moderne formaten. WebP is 25 tot 35% kleiner dan JPEG. AVIF is nog kleiner. Gebruik het HTML-element `` om WebP te leveren aan moderne browsers en JPEG aan oudere browsers, voor achterwaartse compatibiliteit. Alleen al de keuze van het formaat kan de LCP met 200 tot 400ms verbeteren.

Geef afbeeldingsafmetingen op. Door de attributen width en height op te nemen voorkom je layoutverschuivingen en kan de browser ruimte reserveren voordat de afbeelding laadt. Dit verbetert de LCP niet direct, maar wel de Cumulative Layout Shift (CLS), een andere meetwaarde van Core Web Vitals.

CSS en JavaScript die het weergeven blokkeren

CSS die het weergeven blokkeert, houdt de browser tegen om de pagina weer te geven tot de CSS is gedownload en verwerkt. Grote CSS-bestanden vertragen het weergeven. Beperk CSS die het weergeven blokkeert door kritieke CSS inline te plaatsen en de rest uit te stellen.

Kritieke CSS is de CSS die nodig is voor content boven de vouw. Plaats deze CSS inline in `