Ga naar inhoud
De E-commerce Bijbel

3.7 Snelheid, mobiel & Core Web Vitals

Snelheid is geen technisch detail maar een verkoophefboom. Elke seconde extra laadtijd kost conversie, en Google gebruikt snelheid als rankingfactor. Op mobiel — waar de meeste van je bezoekers zitten — telt het dubbel. Dit hoofdstuk maakt snelheid meetbaar en geeft je de concrete ingrepen die het meeste opleveren.

Kernconcepten

Section titled “Kernconcepten”

Core Web Vitals (CWV) — drie meetbare snelheids- en stabiliteitssignalen die Google gebruikt om de gebruikerservaring te beoordelen. Ze zitten in je ranking en zijn meetbaar in echte gebruikersdata.

LCP (Largest Contentful Paint) — hoe snel het grootste element (vaak je hero-beeld of producthoofdfoto) zichtbaar is. Meet gevoelde laadsnelheid.

INP (Interaction to Next Paint) — hoe snel de pagina reageert op een klik of tik. Vervangt sinds 2024 de oude FID-metric. Meet responsiviteit.

CLS (Cumulative Layout Shift) — hoeveel de pagina “verspringt” tijdens het laden. Een knop die wegspringt terwijl je erop tikt is slechte CLS.

Lazy loading — afbeeldingen pas laden wanneer ze bijna in beeld komen, in plaats van alles tegelijk. Versnelt de eerste indruk.

WebP / AVIF — moderne beeldformaten die fors kleiner zijn dan JPEG/PNG bij gelijke kwaliteit.

CDN (Content Delivery Network) — een netwerk van servers wereldwijd dat je bestanden dicht bij de bezoeker serveert. Shopify heeft dit ingebouwd; bij WooCommerce voeg je het toe.

Themabloat — overbodige code en functies in je thema die de pagina onnodig verzwaren.

Waarom snelheid omzet en SEO raakt

Section titled “Waarom snelheid omzet en SEO raakt”

Onderzoek van onder meer Google en grote retailers toont consistent: hoe trager de pagina, hoe lager de conversie. Indicatief:

  • Een laadtijd van 1 naar 3 seconden verhoogt de kans op een bounce aanzienlijk; van 1 naar 5 seconden meer dan verdrievoudigt die kans.
  • Pagina’s die de Core Web Vitals halen, presteren in zowel gebruikerstevredenheid als zoekresultaten beter dan pagina’s die ze niet halen.
  • Op mobiel, met tragere verbindingen en zwakkere processors, is het effect groter dan op desktop.

De vuistregel: elke seconde die je wint above the fold, win je een stukje conversie terug. En omdat CWV een rankingfactor is, win je tegelijk SEO (zie 6.3 Technische SEO).

Stap-voor-stap workflow

Section titled “Stap-voor-stap workflow”

  1. Meet eerst, gok niet. Draai je belangrijkste pagina’s (homepage, een categorie, je bestseller-productpagina) door PageSpeed Insights. Noteer de mobiele scores en de drie CWV-waarden.

  2. Pak je afbeeldingen aan. Dit is bijna altijd de grootste winst. Comprimeer alles, zet om naar WebP/AVIF, en upload op de juiste afmeting (geen 4000 pixels brede foto die op 800 pixels getoond wordt).

  3. Zet lazy loading aan voor alles onder de vouw, maar níet voor je LCP-element (de hero-/hoofdfoto) — die wil je juist zo snel mogelijk.

  4. Ruim apps en scripts op. Elke app laadt code. Verwijder wat je niet gebruikt (zie 3.8 Apps & plugins).

  5. Beperk en optimaliseer fonts. Gebruik maximaal twee lettertypen, laad alleen de gewichten die je echt gebruikt, en stel font-display zo in dat tekst direct zichtbaar is.

  6. Voorkom layout shift (CLS). Geef afbeeldingen en advertentie-/embed-blokken vaste afmetingen mee zodat er niets verspringt tijdens het laden.

  7. Zorg voor een CDN en caching. Bij Shopify automatisch; bij WooCommerce via je host of Cloudflare plus een caching-plugin.

  8. Test mobiel-first. Bekijk en meet alles op een telefoon, niet alleen op je brede desktopscherm.

  9. Meet opnieuw en vergelijk met je nulmeting. Herhaal tot je in het groen zit.

Voorbeeld: een trage productpagina versnellen

Section titled “Voorbeeld: een trage productpagina versnellen”

Een NL-shop meet zijn bestseller-productpagina op mobiel: LCP 4,8 seconden, INP 320 ms, CLS 0,28. Alles in het rood. De ingrepen:

  1. Hoofdfoto: een JPEG van 3,2 MB op 3000 pixels breed werd een WebP van 180 KB op 1200 pixels. LCP zakt naar 2,6 seconden.
  2. Lazy loading aangezet voor de galerij en reviews onder de vouw. Minder bytes bij eerste load.
  3. Drie ongebruikte apps verwijderd (een oude pop-up, een ongebruikte wishlist, een dubbele trackingsnippet). INP zakt naar 180 ms.
  4. Vaste afmetingen op alle afbeeldingen en het reviewblok ingesteld. CLS zakt naar 0,05.
  5. Eén overbodig lettergewicht geschrapt. Marginale, maar gratis winst.

Eindmeting: LCP 2,1 seconden (goed), INP 150 ms (goed), CLS 0,05 (goed). Alle drie in het groen, zonder dat er iets aan het design veranderde. De add-to-cart-rate steeg meetbaar mee.

Formules & benchmarks

Section titled “Formules & benchmarks”

Core Web Vitals hebben officiële streefwaarden (op het 75e percentiel van echte bezoekers):

MetricGoedVerbetering nodigSlecht
LCPMinder dan 2,5 s2,5 tot 4,0 sMeer dan 4,0 s
INPMinder dan 200 ms200 tot 500 msMeer dan 500 ms
CLSMinder dan 0,10,1 tot 0,25Meer dan 0,25

Aanvullende streefwaarden voor een gezonde shop:

AspectGoede richtwaarde
Mobiele PageSpeed-scoreMeer dan 70 (boven 90 is uitstekend)
Totale paginagrootte (eerste load)Minder dan 2 MB, liefst onder 1 MB
Time to First Byte (TTFB)Minder dan 200 ms
Aantal hoofdfoto-bytes (LCP-beeld)Minder dan 200 KB
Aantal geïnstalleerde apps met frontend-codeZo laag mogelijk; elke app weegt

Indicatieve conversie-impact:

Geschatte conversiewinst ≈ verbetering in laadseconden × gevoeligheid van je publiek

Reken niet op een exacte formule, maar weet: van 5 naar 2,5 seconden LCP is doorgaans een merkbare conversiestijging waard, vaak meer dan welke design-tweak ook.

Tools

Section titled “Tools”
ToolFunctieWanneer kiezen
PageSpeed InsightsCWV en aanbevelingen, lab + veldStandaard startpunt; meet altijd hier
Lighthouse (in Chrome DevTools)Diepe technische audit per paginaJe wilt detail over welk element traag is
Google Search Console (CWV-rapport)CWV over je hele site, echte gebruikersOverzicht welke paginatypen falen
TinyIMG / Crush.pics / ShortPixelAfbeeldingen comprimeren en WebP/AVIFBulk beeldoptimalisatie zonder handwerk
CloudflareCDN en caching (vooral WooCommerce)WooCommerce zonder ingebouwd CDN
WP Rocket (WooCommerce)Caching, lazy load, code minifyWooCommerce-shop die snelheid serieus neemt

Veelgemaakte fouten

Section titled “Veelgemaakte fouten”
  • Ongecomprimeerde, te grote afbeeldingen. Veruit de grootste oorzaak van trage shops. Pak dit eerst.
  • Lazy loading op het LCP-element. Je hero-/hoofdfoto wil je juist meteen laden, niet uitstellen.
  • Te veel apps. Elke app injecteert code die op elke pagina meelaadt, ook als je hem nauwelijks gebruikt.
  • Zware sliders en achtergrondvideo’s in de hero die de eerste indruk vertragen.
  • Geen vaste afmetingen op afbeeldingen, waardoor de pagina verspringt (slechte CLS) en mensen mis-tikken.
  • Te veel lettertypen en gewichten. Elk extra font is een extra download.
  • Alleen op desktop testen. Je publiek zit op mobiel; meet daar.
  • Eénmalig optimaliseren en vergeten. Na elke nieuwe app of bannercampagne kan je snelheid weer wegzakken. Meet periodiek.

Checklist

Section titled “Checklist”

Sjablonen

Section titled “Sjablonen”
Snelheids-audit per pagina 
Pagina: [URL]
Gemeten op: mobiel, [datum]


NULMETING:
- LCP: [waarde] s  (doel: minder dan 2,5)
- INP: [waarde] ms (doel: minder dan 200)
- CLS: [waarde]    (doel: minder dan 0,1)
- Mobiele score: [getal]
- Paginagrootte: [MB]


GROOTSTE BOOSDOENERS (uit PageSpeed):
1. [bijv. te grote hero-foto]
2. [bijv. ongebruikte app-scripts]
3. [bijv. layout shift door reviewblok]


INGREPEN:
- [actie] → verwacht effect [metric]
- [actie] → verwacht effect [metric]


HERMETING:
- LCP: [waarde] | INP: [waarde] | CLS: [waarde]
- Score: [getal] (was [getal])

Lees verder

Section titled “Lees verder”