Waar de Magento checkout vastloopt
Een standaard Magento 2 checkout bestaat uit vier stappen: winkelwagen, verzendadres, verzendmethode en betaling. Elke stap laadt via Knockout.js componenten die pas renderen nadat de JavaScript-bundle volledig is uitgevoerd. Op een gemiddelde mobiele verbinding is dat merkbaar.
- ▸Knockout.js render delays: de checkout-pagina laadt een zware JS-bundle voordat klanten iets kunnen invullen. Op Slow 4G loopt dit op tot boven de 3 seconden voor de eerste interactie.
- ▸Adresvalidatie roundtrips: elke keystroke in het adresveld triggert een server-request voor validatie. Bij trage TTFB voelt dat als haperen.
- ▸Payment-method JS bundling: betaalmethodes laden hun eigen scripts pas als klanten bij stap 4 aankomen. Die vertraging komt op het slechtste moment.
- ▸Geen soft-validatie tussen stappen: klanten die een veld verkeerd invullen, merken dat pas als ze op 'Volgende' klikken. De fout verschijnt bovenaan de pagina, ver weg van het veld dat aangepast moet worden.
- ▸Geen herstel na mislukte betaling: als een betaling mislukt, belandt de klant op een generieke foutpagina zonder voorgevulde gegevens. Veel klanten verlaten op dat punt de shop.
- ▸Geen gastcheckout zichtbaar in de flow: het aanmaken van een account wordt standaard gepromoot boven gastcheckout, wat voor mobiele kopers een extra drempel oplevert.
Dit zijn geen bugs. Dit is hoe Magento 2 checkout by default werkt. De problemen stapelen op een gemiddelde shop met een paar betaalmethodes en één of twee adresvalidatie-extensies.
De meetbare impact op jouw funnel
Cart abandonment van 70 procent of hoger op de checkout is geen uitzondering voor Magento-shops. Branche-gemiddelden liggen rond de 70 tot 75 procent. Maar niet al die verlaten carts zijn kopers die van plan veranderden. Een deel verlaat de checkout doordat het te traag gaat, doordat een formulier niet doorkomt, of doordat een betaalmethode pas bij de laatste stap zichtbaar wordt.
De meest informatieve meting is drop-off per stap in Google Analytics 4 enhanced ecommerce. Waar haken klanten af: bij het invullen van het adres, bij het kiezen van de verzendmethode, of bij de betalingsstap? Die data bepaalt waar de winst zit. INP op de checkout-pagina zelf is een tweede indicator: een INP boven 200 ms op de formuliervelden betekent dat klanten merkbare vertraging voelen bij elke invoer.
Bij CarCare24 stond de CrUX-INP voor de checkout op 111 ms na de performance-optimalisaties. Dat is onder de 200 ms-grens. Voor een checkout met Knockout.js is dat bereikbaar met gerichte aanpassingen aan de script-laadvolgorde en het vermijden van synchrone XHR-aanroepen in de validatielogica.
Hoe ik de checkout audit
Een checkout-audit begint met data, niet met aannames. Ik kijk naar drie bronnen: de GA4 enhanced ecommerce funnel, session recordings van Hotjar of Microsoft Clarity, en CrUX-data voor het /checkout pad.
- ▸GA4 enhanced ecommerce funnel: stap-voor-stap drop-off rate per apparaattype. Mobiele bezoekers haken vaker af bij het adresformulier, desktop bezoekers vaker bij de betalingsstap.
- ▸Session recordings: Hotjar of Microsoft Clarity laten zien waar klanten aarzelen, teruggaan, of na een validatiefout afhaken. Dit maakt aannames over gedrag overbodig.
- ▸CrUX INP voor /checkout: het Chrome User Experience Report toont de daadwerkelijke interactiviteitsvertraging op de checkout-pagina, gemeten bij echte bezoekers over 28 dagen.
- ▸Payment provider logs: Mollie of Stripe logs geven inzicht in hoeveel betalingen starten, hoeveel mislukken bij de eerste poging, en hoeveel klanten terugkeren na een mislukte betaling.
- ▸Network waterfall op checkout-pagina: welke scripts laden synchroon, welke betaalmethode-scripts staan niet te wachten op een user-trigger, en wat is de TTFB bij cart-aanmaken.
- ▸Adresvalidatie-extensie analyse: welke extensie handelt de adresvalidatie af, hoeveel requests stuurt die per invoer, en is er een debounce aanwezig.
Uit deze bronnen komt een gerangschikte lijst van knelpunten met geschatte conversie-impact. Pas daarna beslis je welke fixes de scope krijgen.
Wat ik typisch aanpas in de Magento checkout
Na de audit implementeer ik de fixes die de hoogste impact hebben op drop-off en INP. Op Magento-shops gaat het bijna altijd om een combinatie van de volgende aanpassingen:
- ▸1-page checkout: alle stappen op een enkele pagina, zonder page refreshes tussen adres, verzending en betaling. De Knockout.js componenten worden direct geladen, zonder stap-voor-stap navigatie.
- ▸Inline validatie met soft-errors: validatiefouten verschijnen direct naast het veld, niet pas na het klikken op 'Volgende'. Bij een fout blijft de focus op het veld.
- ▸Async payment method loading: betaalmethodes worden asynchroon geladen zodra de checkout-pagina opent, niet pas bij stap 4. Klanten zien de opties eerder en kunnen een keuze maken terwijl ze het adres invullen.
- ▸Adresautocomplete via Postcode.nl of PDOK: postcode plus huisnummer volstaan voor Nederlandse adressen. De straat en woonplaats worden automatisch ingevuld, wat het formulier verkort en validatiefouten reduceert.
- ▸magento_persistent.php voor herstel na mislukte betaling: als een betaling mislukt, worden adresgegevens en de gekozen betaalmethode bewaard in de sessie. Klanten hoeven niet opnieuw te beginnen.
- ▸Gastcheckout als primaire optie: het account-aanmaken prompt verplaatsen naar na de aankoop, als onderdeel van de bestelbevestiging. Op mobiel verlaagt dit het invulpad significant.
Welke van deze aanpassingen van toepassing zijn, hangt af van jouw extensie-set en de Magento-versie. Op Magento 2.4.6 of hoger zijn sommige opties direct beschikbaar via configuratie. Op oudere versies zijn gerichte patches of custom modules nodig.
-- Klant-casus
Checkout INP 111ms: hoe CarCare24 de interactiviteit op de betaalstap verbeterde
CarCare24 heeft een Magento 2 checkout met vier betaalmethodes (iDEAL, creditcard, PayPal, achteraf betalen) en adresvalidatie via een externe API. Voor de optimalisaties stond de checkout-INP op boven de 300 ms op mobiel. Klanten ervoeren merkbare vertraging bij het invullen van het adresformulier, met name op het moment dat de adresvalidatie een server-request stuurde.
De audit wees drie concrete knelpunten aan: de adresvalidatie verstuurde een request bij elke keystroke zonder debounce, de betaalmethode-scripts werden synchroon geladen bij het openen van stap 4, en de Knockout.js binding voor de verzendmethodes blokkeerde de main thread bij het wisselen van verzendoptie.
De fixes: debounce op de adresvalidatie API-call (300 ms vertraging voor het versturen), async laden van betaalmethode-scripts bij checkout-pagina-open, en een patch op de Knockout.js verzendmethode-binding om de main thread te ontlasten. Resultaat: CrUX-INP daalde naar 111 ms. De cart-abandonment in GA4 enhanced ecommerce daalde van 76 procent naar 64 procent op de checkout-stap. Dat is geen garantie voor elke shop, maar het geeft aan waar de winst zit als je de juiste knelpunten aanpakt.
Wat ik niet doe
Er zijn snelle manieren om een checkout er beter uit te laten zien zonder de daadwerkelijke knelpunten aan te pakken. Ik gebruik ze niet.
- ✕OneStepCheckout-extensies installeren zonder eigen beoordeling: er zijn tientallen one-step checkout extensies voor Magento beschikbaar. Sommige zijn goed gebouwd, veel zijn dat niet. Ze voegen hun eigen JavaScript-stack toe die de bestaande bundle verzwaart. Ik installeer geen extensie die ik niet eerst geanalyseerd heb op bundle-impact en conflicten met bestaande modules.
- ✕Headless checkout zonder bredere architectuurcontext: een React of Next.js checkout losgekoppeld van de Magento-backend klinkt aantrekkelijk, maar vereist een stabiele GraphQL of REST API, correct geconfigureerde CORS, en een goed begrip van de Magento quote/order flow. Ik doe dit alleen als de bredere shop-architectuur dat ondersteunt.
- ✕Custom payment provider integraties zonder klantonderzoek: een nieuwe betaalmethode toevoegen die jouw klanten niet gebruiken, lost geen conversieprobleem op. Ik kijk eerst naar de drop-off per betaalmethode in de GA4-data.
- ✕Score-chasing zonder funnel-context: een INP van 150 ms versus 111 ms maakt minder uit als de gastcheckout onvindbaar is. Ik prioriteer op funnel-impact, niet op technische perfectie.
Als een extensie of aanpak buiten mijn beoordeling valt, zeg ik dat direct. Liever een eerlijk nee dan een implementatie die later meer problemen geeft dan oplost.
Scope en prijs
De prijs van een checkout-traject hangt af van het aantal betaalmethodes, of er B2B-flows aanwezig zijn (multi-adres, kostenplaatsen, factuurworkflows), en of de scope een audit alleen is of ook de implementatie.
Ik werk niet met vaste prijspakketten voor Magento checkout-werk. Een shop met iDEAL en gastcheckout heeft een andere scope dan een B2B-shop met vijf betaalmethodes, afwijkende checkout per klantengroep en een BTW-validatieflow. Prijzen zijn op aanvraag, na een eerste gesprek.