# Mobiele webshop-optimalisatie: Core Web Vitals, checkout en de concrete fixes die conversie opleveren

> 70-85% van het webshopverkeer is mobiel. De tien concrete onderdelen (Web Vitals, tikdoelen, autofill, Apple Pay, duimzones) die het conversieverschil tussen mobiel en desktop dichten, met echte tools en benchmarks.

Ryan Badger - 1 mei 2025 - 8 min leestijd

## Waarom mobiel het hele spel is

70-80% van je webshopverkeer is mobiel. In de meeste consumentencategorieën loopt dat richting 85%. De conversie op desktop ligt meestal 2-3x hoger dan op mobiel. Dat zegt minder over desktop dat beter is en meer over mobiel dat bij de meeste shops kapot is.

Een goed geoptimaliseerde mobiele ervaring dicht dat gat en draait het vaak zelfs om: sommige DTC-merken converteren op mobiel inmiddels gelijk aan of beter dan op desktop. Het verschil is concreet, meetbaar en vooral een kwestie van basishygiëne, niet van innovatie.

In dit artikel lees je wat mobiele conversie echt verbetert, met benchmarks, tools en concrete dingen om te fixen. Geen "ontwerp mobile-first", maar de specifieke checks die samen een flinke stijging opleveren.

## 1. Core Web Vitals en waarom Google ze in de gaten houdt

Google gebruikt Core Web Vitals als rankingsignaal en als graadmeter voor de kwaliteit van de ervaring. Los van de SEO-kant zijn de onderliggende meetwaarden sterke voorspellers van conversie.

### LCP (Largest Contentful Paint)

De tijd tot het grootste element boven de vouw (meestal een hero-afbeelding of de H1) is gerenderd. Doel: onder 2,5 seconden op mobiel 4G.

De meest voorkomende oorzaken van een slechte LCP:

- Hero-afbeelding ongecomprimeerd of te groot
- Het laden van webfonts blokkeert het renderen
- Scripts van derden (chatwidgets, analytics, A/B-testtools) in de `<head>`

### INP (Interaction to Next Paint)

De tijd tussen een interactie van de gebruiker (een tik) en de eerstvolgende visuele update. Doel: onder 200 ms.

De meest voorkomende oorzaken van een slechte INP:

- Pagina's vol JavaScript (React/Vue-shops zonder code-splitting)
- Analytics- of chatscripts die synchroon afgaan bij een interactie
- Tikvertraging in oudere mobiele browsers

### CLS (Cumulative Layout Shift)

Dingen die over de pagina heen springen terwijl die laadt. Doel: onder 0,1.

De meest voorkomende oorzaken:

- Afbeeldingen zonder width/height-attributen
- Advertenties of embeds van derden die pas na de content laden
- Fonts die laden en de tekstgrootte veranderen

### Zo controleer je het

Gratis: [PageSpeed Insights](https://pagespeed.web.dev/) draait Lighthouse en rapporteert alle drie. Test je productpagina met de meeste omzet, niet je homepage. Fix wat rood is, accepteer wat oranje is en ga verder.

Betaald / dieper: WebPageTest.org voor waterfall-analyse, het tabblad Performance in Chrome DevTools voor lokaal profileren.

## 2. Mobiele snelheid onder 3 seconden (echt mobiel, niet een afgeknepen desktop)

De "mobiele emulator" van een desktopbrowser gebruikt een snelle verbinding en een snelle processor. Echte telefoons hebben tragere verbindingen en tragere processors. Het verschil is aanzienlijk.

Test op echte telefoons met 4G. Als je pagina in de mobiele emulator van Chrome 2 seconden nodig heeft, is het op een Android uit het middensegment met 4G waarschijnlijk 4-5 seconden.

### De grootste snelheidswinsten (op volgorde)

1. **Afbeeldingen optimaliseren:** comprimeer tot 80% kwaliteit, schaal naar de afmetingen die je echt nodig hebt, lever WebP of AVIF. Shoprocket doet dit automatisch via Cloudflare
2. **Lazy-load content onder de vouw.** Afbeeldingen, iframes en zware scripts hoeven pas te laden als je er naartoe scrolt
3. **Stel niet-kritieke JavaScript uit.** Analytics, chatwidgets en A/B-testtools mogen het renderen niet blokkeren
4. **Cache statische bestanden agressief.** Een cache van 1 jaar op afbeeldingen, fonts, CSS en JS met URL's met fingerprint
5. **Gebruik een CDN** (Cloudflare, Fastly of de ingebouwde variant van je platform). Levert bestanden vanaf een server dichtbij de bezoeker
6. **Beperk scripts van derden.** Elke pixel en tag kost zo'n 50-200 ms; bekijk wat echt nodig is

## 3. Afmetingen van tikdoelen

De Human Interface Guidelines van Apple schrijven tikdoelen van minimaal 44×44 pixels voor. Google Material schrijft 48×48 voor. De meeste "mobiele" versies van thema's halen geen van beide.

**Fixes:**

- Knoppen minimaal 44px hoog met 8-12px padding aan de binnenkant
- Links in de navigatie minimaal 44px hoog
- Formuliervelden minimaal 44px hoog (ook goed voor toegankelijkheid)
- Minimaal 8px ruimte tussen naast elkaar liggende tikdoelen

Test: open je shop op een telefoon. Probeer met je duim in het categoriemenu te tikken. Tik je vaak ernaast? Dan heb je een probleem met tikdoelen.

## 4. Specifiek voor de mobiele checkout

Winkelwagen en checkout zijn op mobiel waar de meeste conversie wegvloeit. De concrete takenlijst:

### Formulieren in één kolom

Formulieren met twee kolommen werken op desktop en falen op mobiel. Zet elk veld onder elkaar. Zonder uitzondering.

### Passende invoertypes

- E-mailveld: `type="email"` (toont het e-mailtoetsenbord met @-teken)
- Telefoon: `type="tel"` (numeriek toetsenbord)
- Postcode: `type="text" inputmode="numeric"` voor landen met numerieke postcodes
- Creditcardnummer: `type="text" inputmode="numeric" autocomplete="cc-number"` (zorgt dat autofill werkt)

De meeste platforms regelen dit standaard goed. Het loont om je formulier op een telefoon te testen; komt er het verkeerde toetsenbord naar boven, fix dat dan.

### Autofill-vriendelijkheid

Browsers kunnen naam, adres, e-mail, telefoonnummer en kaartgegevens automatisch invullen als de `autocomplete`-attributen van het formulier kloppen. Een klant die op een autofill-suggestie tikt, rondt de checkout in 3 seconden af. Zonder autofill typt diegene handmatig 12+ velden.

Standaardwaarden voor autocomplete: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`.

### Sticky Add-to-Cart op productpagina's

Scroll op een mobiele productpagina 3 schermen naar beneden en de knop In winkelwagen is uit beeld. De oplossing: een vaste balk onderaan met de prijs en In winkelwagen, die verschijnt zodra de oorspronkelijke knop uit beeld scrolt.

### Apple Pay + Google Pay + Link

Dit zijn de grootste verbeteringen voor de mobiele checkout. Betalen met één tik zonder typen, met native biometrische authenticatie.

- **Apple Pay:** wordt automatisch ingeschakeld zodra je je domein bij Stripe verifieert (Shoprocket regelt dit)
- **Google Pay:** werkt vergelijkbaar
- **Stripe Link:** vult kaart en adres in op basis van de identiteit die Link over sites heen onthoudt

Elke mobiele checkout zonder deze opties laat klanten lekken. Schakel ze alle drie in.

## 5. Minder formuliervelden

Elk veld in je mobiele checkout is een wrijvingspunt. Loop je velden langs:

**Meestal nodig:**

- E-mail
- Verzendadres (naam, straat, plaats, postcode, land)
- Betaalgegevens (of Apple/Google Pay)

**Vaak te veel gevraagd:**

- Telefoonnummer (alleen als je het nodig hebt voor bezorging of vervoerders; veel shops hebben het niet nodig)
- Geboortedatum (bij aankoop bijna nooit nodig)
- Bedrijfsnaam (alleen voor B2B)
- Nieuwsbriefinschrijving (vooraf aangevinkt waar dat wettelijk mag; anders een apart selectievakje)
- "Hoe heb je van ons gehoord?" (verplaats naar een enquête na de aankoop)

Minder velden = snellere checkout = hogere voltooiing. Elk veld dat je weghaalt levert ruwweg 5-10% meer voltooide mobiele checkouts op, en dat stapelt.

## 6. Leesbare tekst en regellengte op mobiel

- **Lopende tekst:** minimaal 16px (de iOS-standaard en de richtlijn van Google Material)
- **Regellengte:** 45-75 tekens
- **Regelhoogte:** 1,4-1,6x de lettergrootte
- **Contrast:** minimaal WCAG AA (4,5:1 voor lopende tekst, 3:1 voor grote tekst)

Als klanten inzoomen op je productbeschrijving, is je tekst te klein. Als ze de telefoon op zijn kant moeten draaien om te lezen, zijn je regels te breed of je lettertype te krap.

## 7. Rekening houden met bediening met één hand

De meeste mobiele gebruikers bedienen hun telefoon met één hand, met de duim vanuit rechtsonder (of linksonder voor linkshandigen). Belangrijke interacties horen in die duimzone.

- Primaire CTA (In winkelwagen, Afrekenen, Nu kopen) dicht bij de onderkant
- Hamburgermenu linksboven of rechtsboven, binnen duimbereik
- Een voorspelbare "Terug"-knop (de terugknop van de browser wint meestal van een eigen terugknop)

Laat mensen niet dubbeltikken op moeilijk bereikbare plekken. Elk moment van duimgymnastiek kost je klanten.

## 8. Een productpagina speciaal voor mobiel

Productpagina's op desktop tonen vaak alles tegelijk (galerij links, details rechts, beschrijving eronder). Die indeling vertaalt zich niet naar mobiel; daar moet je de content op volgorde zetten.

Een effectieve volgorde voor een mobiele productpagina:

1. Hero-afbeelding (galerij waar je doorheen veegt)
2. Titel + prijs
3. Variantkeuze (maat, kleur)
4. In winkelwagen (primaire CTA)
5. Vertrouwenssignalen (beoordeling, gratis verzending, retourneren)
6. Beschrijving (inklapbaar, na 3 regels afgekapt)
7. Specificaties / details (inklapbaar)
8. Samenvatting van reviews met uitklap "alles bekijken"
9. Gerelateerde producten
10. FAQ (inklapbaar)

Content onder de vouw moet lazy-loaded worden. Een mobiele klant beslist vaak in de eerste 3 onderdelen of hij koopt; alles laden vertraagt die beslissing.

## 9. Testen op echte apparaten

Dus niet DevTools. Niet de mobiele emulator van de browser. Echte telefoons op een mobiele verbinding.

Minimale testrotatie:

- iPhone SE (klein scherm, ouder toestel)
- iPhone 15 Pro (nieuwste iOS, Safari)
- Samsung Galaxy uit het middensegment (Android, Chrome)
- Een oudere Android op 4G (laat prestatieproblemen zien)

Bonus: vraag 3 vrienden met verschillende telefoons om iets in je shop te kopen. Kijk mee. Waar ze mee worstelen, is je fixlijst.

## 10. Patronen vermijden die mobiel om zeep helpen

Veelgemaakte fouten die je mobiele conversie slopen:

### Interstitial-popups

Een "Schrijf je in voor 10% korting!"-popup die het scherm bedekt bij de mobiele landing. Google straft die af in de mobiele zoekresultaten. Klanten krijgen hem in beeld en haken af. Gebruik liever inline inschrijfformulieren.

### Automatisch afspelende video met geluid

Verspilt bandbreedte, irriteert gebruikers en iOS blokkeert het toch vaak. Automatisch afspelen zonder geluid is prima voor een hero-video; automatisch afspelen mét geluid is gebruikersvijandig.

### Hover-states op touch

"Beweeg eroverheen voor details" werkt niet op touch. Als je thema op mobiel nog patronen heeft waarbij je iets moet aanwijzen om het te zien, werken die in de praktijk niet.

### Piepkleine "sluiten"-knoppen op modals

Een X van 16 pixels in de hoek is met een duim niet te raken. Maak sluitknoppen 44×44 of gebruik sluitknoppen over de volle breedte onderaan de modal.

### Horizontaal scrollen in productrasters

Op mobiel verbergen horizontaal scrollende productcarrousels 80% van de producten onder de vouw. Een verticaal raster (2 kolommen op mobiel) converteert beter.

## Wat Shoprocket voor mobiel regelt

Het meeste van de basis staat direct klaar:

- **Automatische beeldoptimalisatie:** verkleinen + comprimeren + WebP + lazy-load op elke productafbeelding
- **Winkelwagenlade (geen winkelwagen op een aparte pagina)** is op mobiel de standaard
- **Vaste In-winkelwagen-knop op mobiel** wordt ondersteund in storefronts met een thema
- **Mobiele checkout** met de juiste invoertypes, autocomplete en velden onder elkaar
- **Apple Pay + Google Pay + Stripe Link**: betalen met één tik via Stripe
- **Livechatwidget** die op mobiel goed werkt
- **CDN-levering** via Cloudflare voor elk bestand
- **Core Web Vitals standaard geoptimaliseerd** voor de gehoste storefront

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Gebruik je de widget-embed? Dan beheer je zelf de snelheid en het ontwerp van de pagina eromheen. De widget van Shoprocket wordt lazy-loaded en blokkeert het renderen van je pagina niet, maar de totale paginasnelheid blijft aan jou.

> **Tip:** Draai eens per kwartaal PageSpeed Insights op je top-3 productpagina's qua omzet, op mobiel. Noteer de drie Core Web Vitals-scores. Vergelijk ze volgend kwartaal. Een dalende trend is een sluipmoordenaar van conversie; vang het elk kwartaal af in plaats van pas na de schade.

## TL;DR

- **Mobiel is 70-85% van het verkeer.** De meeste shops behandelen het als bijzaak; doe dat niet
- **Core Web Vitals zijn de drie cijfers om te volgen:** LCP, INP, CLS. Onder 2,5 s / 200 ms / 0,1
- **Test op echte apparaten met 4G,** niet in een browseremulator
- **Checkout in het kort:** formulieren in één kolom, juiste invoertypes, autocomplete, Apple/Google Pay, vaste CTA's
- **Minder formuliervelden** = hogere voltooiing. Bekijk wat echt nodig is
- **Tikdoelen minimaal 44×44.** Ruimte tussen tikdoelen minimaal 8px
- **De duimzone telt.** Primaire CTA's dicht bij de onderkant; hamburgermenu's linksboven of rechtsboven
- **Vermijd wat mobiel om zeep helpt:** interstitials, automatisch afspelend geluid, hover-states, piepkleine sluitknoppen

[Start een gratis proefperiode](https://app-v3.shoprocket.io/signup) en krijg vanaf dag één automatische beeldoptimalisatie + Apple Pay + een mobiele checkout. 14 dagen, geen kaart nodig.

---

- HTML version: https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie
- Language: Nederlands (nl)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)