Core Web Vitals voor E-commerce: Hoe LCP, INP en CLS op Uw Winkel te Fixen

Core Web Vitals zijn de manier waarop Google meet hoe een pagina aanvoelt voor echte gebruikers. Voor online winkels zijn ze dubbel zo belangrijk: ze maken deel uit van Google’s pagina-ervaring signalen en, nog belangrijker, trage en haperige pagina’s verliezen verkopen.

Het goede nieuws: op e-commerce sites veroorzaakt dezelfde handvol problemen de meeste mislukkingen. Deze gids legt elke metriek uit in winkeltermen en laat zien hoe je het kunt oplossen.

De drie metrics en hun doelstellingen

Metriek	Wat het meet	“Goede” drempel
LCP – Grootste Inhoudelijke Schildering	Hoe snel de hoofdinhoud (vaak de productafbeelding of heldenbanner) verschijnt	≤ 2,5 s
INP – Interactie naar Volgende Schildering	Hoe snel de pagina reageert op tikken en klikken	≤ 200 ms
CLS – Cumulatieve Lay-out Verschuiving	Hoeveel de lay-out springt tijdens het laden	≤ 0.1

Google beoordeelt deze op het 75e percentiel van echte bezoeken. Dat betekent dat drie op de vier bezoekers een goede ervaring nodig hebben, niet alleen jouw snelle kantoorkantoorcomputer.

INP verving First Input Delay (FID) als een Core Web Vital in maart 2024. Veel winkels die onder FID slaagden, falen nu onder INP, omdat INP elke interactie meet, niet alleen de eerste.

Waar je je echte gegevens kunt vinden

• Google Search Console → Core Web Vitals-rapport: groepen URL’s met problemen, gebaseerd op echte Chrome-gebruikers
• PageSpeed Insights: veldgegevens voor een enkele URL plus labdiagnoses
• CrUX-dashboard: geschiedenis in de tijd
• Je eigen echte gebruikersmonitoring (RUM): de web-vitals JavaScript-bibliotheek kan gegevens verzenden naar GA4 of een andere tool

Gebruik labtools (Lighthouse) om oorzaken te vinden, maar beoordeel succes met veldgegevens.

Het oplossen van LCP op product- en categoriepagina’s

Op een productpagina is het LCP-element meestal de hoofdproductafbeelding. Op categoriepagina’s is het vaak een banner of de eerste productafbeeldingen.

Veelvoorkomende oorzaken:

• De hoofdafbeelding wordt lui geladen
• De afbeelding is te groot of in een oud formaat
• De afbeelding wordt geladen door JavaScript (sliders en galerijen)
• Langzame serverreactie (hoge TTFB)
• Render-blokkerende CSS en lettertypen

Oplossingen:

1. Laad de LCP-afbeelding nooit lui. Gebruik loading="eager" en fetchpriority="high" erop.
2. Serve WebP of AVIF met de juiste srcset en sizes.
3. Render de eerste galerijafbeelding in platte HTML, laat vervolgens de slider het overnemen.
4. Los TTFB op met volledige pagina caching (Varnish, een CDN of de cache van uw platform).
5. Laad het hoofdweblettertype vooraf of gebruik font-display: swap.

Fixing INP: het JavaScript probleem

INP-problemen komen bijna altijd voort uit te veel JavaScript dat op de hoofdthread draait.

Veelvoorkomende oorzaken in winkels:

• Zware thema’s (bijvoorbeeld Magento Luma, opgeblazen WordPress-pagina builders)
• Veel tagmanager-scripts: analytics, advertentiepixels, heatmaps, chatwidgets, A/B-testen
• Productoptieselectoren en filters die de hele pagina opnieuw weergeven
• Grote widgets voor beoordelingen en aanbevelingen van derden

Oplossingen:

1. Controleer uw tagmanager. Verwijder tags die niemand gebruikt. Laad niet-kritieke tags na gebruikersinteractie of wanneer de gebruiker inactief is.
2. Vertraag chatwidgets totdat de gebruiker scrolt of op een chatknop klikt.
3. Verdeel lange taken. Ontwikkelaars kunnen de hoofdthread vrijgeven zodat klikken sneller worden afgehandeld.
4. Kies een lichtere frontend wanneer het thema zelf het probleem is. Bij Magento is overstappen naar Hyvä vaak de grootste INP-winst. Zie mijn Luma naar Hyvä migratiegids.

Het oplossen van CLS: voorkom dat de pagina springt

Veelvoorkomende oorzaken:

• Afbeeldingen zonder breedte en hoogte
• Cookie-banners en promo-balken die content naar beneden duwen
• Lettertypes verwisselen en tekstgrootte wijzigen
• Laad sterren, badges of “je zou ook kunnen leuk vinden” blokken laat in

Oplossingen:

1. Stel altijd width en height (of aspect-ratio) in op afbeeldingen.
2. Toon cookie-banners als overlays, niet door de pagina te duwen.
3. Reserveer ruimte voor dynamische blokken met een minimale hoogte.
4. Gebruik lettertype-reserves met bijpassende metriek.

Prioriteer op basis van sjabloon, niet op basis van URL

Een winkel kan duizenden URL’s hebben, maar slechts een paar sjablonen: home, categorie, product, zoekopdracht, winkelwagentje, CMS. Als je het sjabloon fixeert, fix je elke URL die het gebruikt. Begin met het sjabloon dat de meeste organische traffic genereert, meestal categorie- of productpagina’s.

Hoe Core Web Vitals verband houden met inkomsten

Snelheid is niet alleen een SEO-onderwerp. Snellere pagina’s betekenen over het algemeen meer bekeken pagina’s en minder verlaten sessies. Om dit voor je eigen winkel te bewijzen, vergelijk je de conversieratio en het bouncepercentage per apparaat en per pagina-snelheidscategorie in je analytics voor en na het werk.

Veelgestelde vragen

Hebben Core Web Vitals directe invloed op rankings?

Ze maken deel uit van Google’s pagina-ervaring signalen. De relevantie van de inhoud is belangrijker, maar wanneer concurrenten dicht bij elkaar liggen, helpt een betere ervaring, en het helpt altijd bij conversie.

Waarom toont PageSpeed Insights elke keer een andere score?

De labscore is een simulatie en varieert. De veldgegevens bovenaan (van echte gebruikers) zijn wat Google gebruikt voor Core Web Vitals.

Hoe lang duurt het voordat Search Console verbetering laat zien?

Gegevens uit het veld zijn gebaseerd op een rollend venster van 28 dagen, dus verwacht ongeveer vier weken na een oplossing voordat het rapport dit volledig weerspiegelt.

Wil je dat je winkel de Core Web Vitals doorstaat?

Ik controleer en verbeter Core Web Vitals op Magento, WooCommerce en Shopify winkels, van LCP-afbeeldingen tot het opruimen van de tagmanager. Bekijk mijn technische SEO-service of vraag een audit aan.