Snelheid van je webshop: welke Core Web Vitals echt tellen voor je omzet

Voor een webshop is LCP veruit de belangrijkste van de drie Core Web Vitals, omdat die bepaalt hoe lang iemand naar een leeg scherm kijkt voordat je productfoto er staat. INP komt daarna, want een filter dat een halve seconde blijft hangen kost je bezoekers op categoriepagina's. CLS is het minst schadelijk voor je omzet, behalve op één plek: je afrekenpagina.

Wat zijn LCP, INP en CLS, in gewone taal?

Drie meetwaarden die Google via echte Chrome-bezoekers verzamelt. Geen laboratoriumscore, maar wat jouw klanten daadwerkelijk meemaken.

LCP (Largest Contentful Paint) is de tijd tot het grootste element op het eerste scherm zichtbaar is. Op een productpagina is dat bijna altijd de hoofdfoto. Goed is 2,5 seconde of minder, slecht is boven de 4 seconden.

INP (Interaction to Next Paint) meet hoe lang het duurt voordat de pagina reageert nadat iemand iets aanklikt. Denk aan een maatkeuze, een filter of de knop "in winkelwagen". Goed is 200 milliseconden of minder, slecht is boven de 500.

CLS (Cumulative Layout Shift) meet hoeveel de pagina verspringt tijdens het laden. Goed is 0,1 of lager. Je kent het gevoel: je wilt op "maat 42" klikken, er laadt een banner in, en je klikt op iets anders.

Belangrijk detail: Google beoordeelt op het 75e percentiel. Als een kwart van je bezoekers een LCP van 4 seconden heeft, sta je op rood, ook als je gemiddelde 2 seconden is. Meet dus altijd op mobiel, en op je product- en categoriepagina's, niet alleen op je homepage.

LCP: waarom je productfoto de boosdoener is

Bij webshops zit de vertraging in negen van de tien gevallen in de afbeelding bovenaan. De vaste verdachten:

Foto's die te groot zijn. Een productfoto van 2400 pixels breed en 1,4 MB die op een telefoon van 390 pixels breed wordt getoond. Exporteer naar WebP of AVIF, lever meerdere formaten via `srcset` en houd de foto op het eerste scherm onder de 150 kB. Bij een meubelwebshop met acht sfeerfoto's per pagina scheelt dat zo 3 MB.

Vertraagd laden op de verkeerde plek. Veel thema's zetten `loading="lazy"` op álle afbeeldingen, ook op de eerste. Daarmee wacht de browser expres met het enige plaatje dat direct nodig is. Zet `loading="eager"` en `fetchpriority="high"` op de hoofdfoto en lazy op de rest.

Een carrousel of slider bovenaan. Vijf banners laden terwijl er één zichtbaar is. Vervang hem door één statische afbeelding. Dat is de snelste winst die je in een middag boekt.

Trage reactietijd van de server. Zit je TTFB boven de 600 milliseconden, dan begin je al met achterstand. Oorzaak is meestal een zwaar thema, twintig apps of een gedeelde hostingomgeving. Zet caching aan en gooi apps weg die je niet gebruikt.

Een cookiemelding die alles blokkeert. Sommige banners laden hun eigen script voordat de pagina getekend mag worden. Dan wacht iedereen een seconde op een balkje.

INP: waarom je filter traag aanvoelt

INP wordt vrijwel altijd veroorzaakt door JavaScript dat te veel tegelijk wil. De hoofdrolspelers bij webshops:

• Filters op categoriepagina's die bij elke aanvinking de hele lijst opnieuw opbouwen. Bij een bouwmaterialenshop met 900 producten per categorie merk je dat direct.
• Zoeksuggesties die bij elke toetsaanslag een verzoek doen. Wacht 250 milliseconden na de laatste toetsaanslag voordat je zoekt.
• Chatwidgets, reviewwidgets en beoordelingssterren die meteen bij het laden starten. Laad die pas na de eerste interactie of na drie seconden.
• Een tagbeheerder met achttien tags waarvan je er vier gebruikt. Elke tag is werk voor dezelfde processor waarmee de bezoeker op een knop wil klikken.

Praktische test: open je categoriepagina op je eigen telefoon, niet op je laptop, en klik snel achter elkaar drie filters aan. Voelt het als plakkerig, dan is het plakkerig.

CLS: waar verspringen je echt geld kost

Verspringen op een productpagina is irritant. Verspringen in je afrekenproces kost orders. Veelgemaakte fouten:

Afbeeldingen zonder breedte en hoogte. Zonder `width` en `height` weet de browser niet hoeveel ruimte hij moet reserveren en schuift de tekst omlaag zodra de foto binnenkomt. Dit is meestal in een uur in je thema opgelost.

Balken die later inladen. "Gratis verzending vanaf 50 euro" of "Nog 3 op voorraad" dat na een seconde bovenaan verschijnt en alles omlaag duwt. Reserveer de ruimte vooraf met een vaste hoogte.

Lettertypen. Een webfont dat later laadt en de tekst anders opmaakt. Gebruik `font-display: swap` en laad je belangrijkste lettertype vooraf.

Wat levert een snellere webshop op in euro's?

Reken het uit met je eigen cijfers in plaats van met algemene percentages. Neem een woonwebshop met 45.000 bezoekers per maand, een conversie van 1,3 procent en een gemiddelde order van 78 euro. Dat is 585 orders en 45.630 euro omzet.

Stel dat je LCP van 4,1 naar 2,3 seconden gaat en de conversie daardoor met 0,1 procentpunt stijgt naar 1,4 procent. Dan heb je 630 orders, dus 45 orders extra, goed voor 3.510 euro omzet. Bij 42 procent brutomarge en 9 procent retouren houd je daar ongeveer 1.340 euro per maand aan over. Een ontwikkelaar die twee dagen aan je foto's, je slider en je scripts werkt, verdien je in ruim een maand terug.

Zet die 0,1 procentpunt trouwens ook naast je advertentiekosten: bij Google Ads betaal je dezelfde klikprijs voor een pagina die 4 seconden laadt. Snelheidswinst verlaagt je kosten per order zonder dat je aan je biedingen komt. Hoe je dat doorrekent naar winst in plaats van omzet staat in rekenen met je eigen marge.

Hoe controleer je dit zelf in een half uur?

1. Open Search Console en ga naar het rapport Core Web Vitals, tabblad Mobiel. Dit zijn echte bezoekersgegevens van de afgelopen 28 dagen. Kijk welke groep URL's op rood of oranje staat, meestal is dat één paginatype tegelijk.
2. Pak uit die groep één productpagina en één categoriepagina en gooi ze door PageSpeed Insights. Kijk eerst naar het blok met veldgegevens bovenaan, niet naar de score van 0 tot 100 eronder. Die score is een laboratoriummeting en zegt minder over je klanten.
3. Open in Chrome de ontwikkelaarsopties, tabblad Netwerk, sorteer op grootte. Alles boven de 200 kB dat je niet kunt uitleggen, is verdacht.
4. Maak een lijst van je geïnstalleerde apps en scripts en schrap wat je het afgelopen kwartaal niet hebt gebruikt.

Snelheid is één onderdeel van je vindbaarheid, geen wondermiddel. Een pagina van 1,8 seconden met een dunne producttekst komt nog steeds niet boven een trage concurrent met betere inhoud. Behandel Core Web Vitals als hygiëne en besteed de rest van je tijd aan de SEO-basis van je webshop.

Wil je niet elke maand handmatig door Search Console en je advertentiecijfers scrollen, dan houdt Formyx dat soort signalen dagelijks voor je bij en rekent het door naar marge in plaats van naar omzet.

Veelgestelde vragen

Zijn Core Web Vitals een rangschikkingsfactor in Google?

Ja, maar een lichte. Google gebruikt ze als onderdeel van de paginabeleving. Ze beslissen zelden wie er op plek één staat, maar bij twee vergelijkbare pagina's kunnen ze het verschil maken. De grootste winst zit in je conversie, niet in je positie.

Moet ik alle drie de waarden op groen krijgen?

Begin bij LCP op je product- en categoriepagina's, daar zit het meeste geld. CLS is daarna meestal met een paar regels code opgelost. INP vraagt vaak een ontwikkelaar en pak je als laatste, tenzij je filters merkbaar haperen.

Waarom verschilt mijn PageSpeed-score elke keer?

De score onderin is een simulatie die per meting varieert. De veldgegevens bovenaan zijn gemiddelden over 28 dagen en bewegen langzaam. Stuur op die veldgegevens en verwacht pas na drie tot vier weken dat een verbetering zichtbaar wordt.