Wat is LCP en waarom is het belangrijk voor jouw Shopify webshop?

Wat LCP betekent

LCP staat voor Largest Contentful Paint. Het is een Core Web Vital — één van drie prestatiemetrics die Google officieel gebruikt als rankingfactor.

In gewone taal: LCP meet hoe lang het duurt voordat het grootste zichtbare element above the fold volledig geladen en gerenderd is in de browser.

Dat element is doorgaans een van de volgende: een hero productafbeelding op een productpagina, een bannerafbeelding op een homepage of collectiepagina, een grote kopregel (als er geen grote afbeelding aanwezig is), of een videoposterafbeelding.

De LCP-klok start op het moment dat een bezoeker naar jouw pagina navigeert. Hij stopt zodra dat grootste element volledig zichtbaar is op het scherm. Alles wat daarvoor plaatsvindt — scripts laden, fonts ophalen, CSS verwerken — versnelt of vertraagt je LCP.

LCP-scores: wat de getallen betekenen

Google classificeert LCP in drie categorieën:

Onder 2,5s — Goed: Sterk rankingsignaal. Bezoekers blijven. Conversieratio profiteert.

2,5s – 4,0s — Verbetering nodig: Neutraal tot licht negatief rankingeffect. Meetbaar hoger bouncepercentage.

Boven 4,0s — Slecht: Negatief rankingsignaal. Significant bounce- en conversieverlies.

Deze drempelwaarden worden gemeten in field data — echte gebruikerservaringen — niet de laboratoriumomstandigheden die tools zoals PageSpeed Insights simuleren. Het onderscheid is cruciaal: je lab-score en je field-score kunnen seconden van elkaar afwijken.

Waarom LCP belangrijker is dan je algemene PageSpeed-score

PageSpeed Insights geeft je een score van 0 tot 100. Veel webshophouders focussen op dit getal. Dat is grotendeels de verkeerde aanpak.

De PageSpeed-score is een samenstelling van veel metrics, waarvan sommige weinig impact hebben op de werkelijke gebruikerservaring of rankings. LCP daarentegen is een direct rankingsignaal met een directe koppeling aan conversiegedrag.

Een webshop met een PageSpeed-score van 58 maar een LCP van 2,2s zal vrijwel altijd beter ranken en converteren dan een webshop met een score van 72 maar een LCP van 4,1s.

De score is een benadering. LCP is het echte gegeven.

Wat slechte LCP veroorzaakt op Shopify

Er zijn vijf hoofdoorzaken die verantwoordelijk zijn voor de meeste slechte LCP-scores op Shopify.

1. Render-blokkerende JavaScript

Wanneer een browser een pagina laadt, verwerkt hij resources in een vaste volgorde. JavaScript-bestanden die synchroon laden — vóór de pagina renderen — blokkeren alles wat daarna zou moeten verschijnen. Elke app die je hebt geïnstalleerd en die JavaScript injecteert in je storefront, is een potentiële LCP-blokkering.

Dit is de meest voorkomende oorzaak van slechte LCP op Shopify-webshops, en de moeilijkste om te diagnosticeren zonder een render-watervalanalyse.

2. Het LCP-element is een CSS-achtergrondafbeelding

Browsers laden CSS-achtergrondafbeeldingen later in de render-volgorde dan inline HTML-afbeeldingen. Als je thema een CSS-achtergrond gebruikt voor de hero-banner — wat veel populaire thema's doen — begint de browser pas met ophalen nadat de CSS verwerkt is.

Dit voegt doorgaans 400–900ms toe aan je LCP, terwijl er een eenregelige fix beschikbaar is.

3. De LCP-afbeelding wordt niet gepreload

Browsers ontdekken afbeeldingen wanneer ze de HTML verwerken. Als je hero-afbeelding verborgen zit in een JavaScript-gerenderde carrousel of lazy wordt geladen, vindt de browser hem te laat. Een eenvoudige preload-hint in de document head vertelt de browser de afbeelding direct op te halen — dit verlaagt de LCP vaak met 500–800ms.

4. Fontladen blokkeert tekstrendering

Als het LCP-element op een bepaalde pagina een tekstkop is — gebruikelijk op landingspagina's en blogposts — bepaalt je fontlaadstrategie direct je LCP. Thema's die meerdere fontgewichten laden bij het starten van de pagina, zonder een font-display strategie, zorgen ervoor dat browsers wachten met renderen totdat de fonts zijn gearriveerd.

5. Serverresponstijd (TTFB)

Voordat je browser iets kan laden, moet hij de eerste byte HTML ontvangen van Shopify's servers. Shopify's mondiale CDN regelt dit goed voor de meeste webshops — maar webshops met zware server-side appverwerking kunnen TTFB-problemen zien die doorwerken in slechte LCP.

Lab data vs. field data: het verschil dat de meeste gidsen negeren

Elke LCP-gids die je online vindt, toont PageSpeed Insights-screenshots. PageSpeed Insights draait je pagina in een gecontroleerde laboratoriumomgeving — een gesimuleerd apparaat op een vast netwerk, zonder browsercache, zonder persistente verbindingen, zonder geografische variatie.

Jouw echte bezoekers zitten op mobiele netwerken in Amsterdam, op oudere Android-apparaten in België, met wisselende verbindingssnelheden en variabele browsercaches.

Field data — het 'echte gebruikerservaring'-gedeelte in PageSpeed Insights en het Core Web Vitals-rapport in Google Search Console — weerspiegelt deze werkelijkheid. Google's rankingalgoritme gebruikt field data, geen lab data.

Controleer altijd je field LCP in Google Search Console → Core Web Vitals voordat je conclusies trekt uit PageSpeed Insights-scores.

Hoe je de LCP van jouw Shopify-webshop controleert

Er zijn twee plekken om te controleren:

1. Google Search Console (field data — wat echt telt): Ga naar search.google.com/search-console → Experience → Core Web Vitals → Mobiel-rapport. Klik door op URL's die als 'Slecht' of 'Verbetering nodig' zijn gemarkeerd. De LCP-waarde hier is een gemiddelde over echte gebruikers in een periode van 28 dagen.

2. PageSpeed Insights (lab data — nuttig voor diagnose): Ga naar pagespeed.web.dev en voer afzonderlijk je homepage, je meest bezochte productpagina en je best presterende collectiepagina in. Scroll naar 'Diagnostics' om te zien welke resources bijdragen aan je LCP. Gebruik dit om te bepalen wat je moet fixen — niet als benchmark voor je algehele prestaties.

Hoe een goede LCP-verbetering eruitziet in de praktijk

Een concreet voor/na-voorbeeld van een Shopify Plus-webshop in de fashion branche:

Voor: LCP van 5,8s op mobiel (field data). Oorzaken: een CSS-achtergrond hero-afbeelding, drie render-blokkerende app-scripts die vóór de content laden, en geen font-display strategie.

Na een gerichte performance sprint — ghost code verwijderd, LCP-element preload gecorrigeerd, laadvolgorde van app-scripts herschikt, en critical CSS inlining geïmplementeerd — daalde de field LCP naar 2,1s.

Het 28-daagse field data-venster werd bijgewerkt. Het Core Web Vitals-rapport verschoof van 'Slecht' naar 'Goed'. Mobiele rankings verbeterden op meerdere commerciële zoekwoorden. De mobiele conversieratio steeg met 31% in de 60 dagen erna.

LCP is geen ijdelheidsmetric. Het is een directe input voor omzet.

De relatie tussen LCP en conversieratio

Er is een goed gedocumenteerd verband tussen paginalaadsnelheid en conversieratio. Uit eigen onderzoek van Google blijkt dat de kans op een bounce stijgt met 32% wanneer de laadtijd oploopt van 1s naar 3s. Van 1s naar 5s is dat 90%.

LCP is de metric die het meest direct verbonden is met de gepercipieerde laadervaring — het is het moment waarop de pagina bruikbaar aanvoelt voor een bezoeker. Verbeteringen richting onder de 2,5s zijn doorgaans binnen 30–60 dagen zichtbaar als meetbare stijgingen in de conversieratio.

Voor een webshop met €50.000/maand omzet, een conversieratio van 2% en een LCP van 4,2s, kan een fix naar 2,3s realistisch €8.000–15.000 extra maandomzet opleveren — zonder een euro extra aan advertenties.

Als je LCP boven de 3,5s ligt in field data, heb je vrijwel zeker oplosbare problemen die in een gerichte engineering-sprint zijn te fixen — zonder redesign, nieuw thema of extra app-abonnementen.