Mijnheer Truckbanden.
Mijnheer Truckbanden levert vrachtwagenbanden aan transporteurs in Nederland, Duitsland en Engeland. Wij bouwden hun B2B-only webshop in 2020; bijna zeven jaar later brachten we hem van het Luma-thema naar Hyvä, met precies hetzelfde design en een homepage die van 38 MB naar 0,36 MB ging.
Een kort overzicht
Mijnheer Truckbanden is een internationale groothandel in vrachtwagenbanden. Een familiebedrijf met veertig jaar ervaring, dat transporteurs, fleetowners en werkplaatsen in drie landen bedient: Nederland, Duitsland en Engeland.
De shop die er nu staat, bouwden wij in 2020, op Magento met het standaard Luma-thema. Bijna zeven jaar later doet hij nog altijd wat hij moet doen, maar het fundament was ingehaald: Luma is zwaar, elke wijziging kostte meer tijd dan nodig en op een telefoon met matig bereik was het geen pretje. Hij was dringend aan een Hyvä-upgrade toe.
Het is een B2B-only webshop. Prijzen worden per klant afgesproken en komen uit het ERP, wie niet is ingelogd ziet geen prijs en kan niets bestellen, en nieuwe accounts worden eerst goedgekeurd. De webshop wordt dus pas een webshop zodra je klant bent. Dat geeft de frontend een andere opdracht dan bij een consumentenshop.
De vraag was niet om hem er anders uit te laten zien, maar om hem sneller en beter onderhoudbaar te maken. Dus: nieuw fundament, hetzelfde design.
Een webshop die vooral gereedschap is
De klanten van Mijnheer bestellen niet op de bank. Ze bestellen vanuit de werkplaats, uit de cabine, tussen twee ritten. Vaak op een telefoon, vaak met matig bereik, en meestal met haast: een truck die stilstaat op een kapotte band kost geld.
Voor zo'n shop heeft de frontend een andere opdracht dan bij een consumentenwebshop. Er hoeft niets verleid te worden. Er moet iets werken. Dat betekent: weinig te downloaden, weinig dat kan haperen, en een pagina die er staat voordat iemand ongeduldig wordt.
De keuze: hetzelfde design, een nieuw fundament
We hebben bewust niet geherontwerpen. Twee grote veranderingen tegelijk, een nieuwe frontend én een nieuw ontwerp, maakt het onmogelijk om te zien waar een probleem vandaan komt. En het dwingt de mensen van de klant om hun eigen shop opnieuw te leren, terwijl daar niemand om had gevraagd.
De bestaande, live shop was daarom de norm. Niet "het lijkt er wel op", maar aantoonbaar hetzelfde. Om die belofte hard te kunnen maken hebben we het gemeten in plaats van bekeken: pagina voor pagina legden we de nieuwe shop naast de oude en vergeleken we kleuren, formaten, marges en kolombreedtes. 184 metingen per storefront, plus controles op alle drie de talen, op de pagina's die je alleen ingelogd ziet, en op de vertalingen.
Dat klinkt overdreven tot je het doet. Een screenshot met het oog vergelijken laat precies de dingen liggen die een klant meteen ziet: een footer die de volle breedte pakt, een uitklapmenu dat er niet meer is, een vlaggetje van twintig pixels dat er achttien is geworden.
Wat Hyvä anders doet dan Luma
Luma, het standaardthema van Magento, bouwt zijn pagina's met drie lagen JavaScript op elkaar. Dat werkt, maar elke wijziging betekent door die lagen heen bewegen, en de bezoeker downloadt ze allemaal. Hyvä draait het om: de pagina komt kant-en-klaar van de server en er gaat een paar kilobyte JavaScript bij, alleen waar er echt iets moet klikken of schuiven.
Voor deze shop pakte dat zo uit. De homepage ging van 38 MB naar 0,36 MB en van 238 naar 29 verzoeken. De categoriepagina van 1 MB naar 0,34 MB. De tijd dat de browser vastzit op JavaScript ging van 21 tot 28 milliseconden naar nul. De Lighthouse-score op mobiel ging op de homepage van 74 naar 98 en op de categoriepagina van 79 naar 91.
Eerlijk is eerlijk: de tijd die de server nodig heeft om een pagina op te bouwen is niet veranderd. Die was 368 milliseconden en is 365 milliseconden. Daar zit de winst dus niet. De winst zit in wat er over de lijn gaat en in wat de browser daarmee moet doen. Voor een inkoper op mobiel internet is dat het verschil tussen "hij laadt" en "hij staat er".
De andere winst is minder zichtbaar en op termijn meer waard: er zijn minder lagen om je een weg door te banen. Een wijziging kost minder tijd, een nieuwe feature landt sneller, en een Magento-upgrade is minder spannend omdat er minder frontend-machinerie is die kan breken. Voor een B2B-shop die jaren meegaat en waar continu kleine dingen bij komen, telt dat harder dan een eenmalige sprint.
De checkout hebben we bewust laten staan
De checkout is het meest verweven stuk van deze shop: betalingen via Mollie, orders en zendingen naar het ERP, en per orderregel een kentekenveld waarmee de klant vastlegt op welke truck de banden gaan. Hyvä kan precies dat stuk op het oude thema laten staan, en dat hebben we gedaan.
De shop is dus overal nieuw, behalve in de stappen waar geld en gegevens bewegen. Dat is geen halve oplossing maar een bewuste fasering: eerst een stabiele nieuwe frontend, dan de checkout, in een eigen traject met eigen tests. De keerzijde noemen we ook: één deel van de shop draagt nog de oude JavaScript mee.
Wat we onderweg tegenkwamen
De homepage sleepte 36 MB aan foto's mee. Twee afbeeldingen, rechtstreeks uit de camera, van 21 en 15 MB. Op een kantoorverbinding valt dat niet op, in een werkplaats op 4G des te meer. Dezelfde foto's zijn nu 30 tot 230 kB, in meerdere maten, zodat een telefoon de kleine variant pakt.
Omdat prijzen alleen voor ingelogde klanten zichtbaar zijn, zegt een controle als bezoeker weinig. Alles moest dus ook ingelogd gemeten worden, met producten in de winkelwagen. Dat leverde zijn eigen vondsten op, zoals een winkelwagen die op mobiel horizontaal te scrollen was.
Drie storefronts betekent drie sets url's en drie sets content. Een Duitse categorie heeft een andere url dan de Nederlandse, dus een controle die op NL slaagt kan op DE geruisloos een 404 opleveren. Sindsdien noemt elke meting zijn eigen storefront.
En er zijn de details die het dagelijks werk van de klant zijn en dus exact moesten blijven werken: het kentekenveld per orderregel, de "meest bestelde"-lijst per klant, het eigen logo van de klant op zijn accountpagina's en de tool waarmee profieldiepte per kenteken wordt bijgehouden.
Onderweg kwamen ook problemen boven die er al vóór de migratie waren: Duitse productpagina's die een afbeelding opvroegen die niet bestaat, footerlinks die nergens heen gingen. Die hebben we gemeld in plaats van stil rechtgetrokken. Een migratie is niet het moment om ongevraagd content aan te passen.
Toegankelijkheid: van "het ziet er goed uit" naar meetbaar
Zowel de oude als de nieuwe shop had plekken met te weinig contrast, knoppen die te klein waren om met een vinger te raken en koppen die een niveau oversloegen. Alle gemeten pagina's staan nu op 100, op mobiel en op desktop; de homepage in alle drie de talen.
Dit is het enige punt waarop we bewust van het oude ontwerp zijn afgeweken. Het grijs van de lopende tekst is een tint donkerder, links in tekst hebben een onderstreping gekregen en twee knoppen een groter raakvlak. Klein, zichtbaar, en met de reden erbij vastgelegd, zodat niemand zich later afvraagt waarom dit ene grijs anders is.
Voor B2B is dat geen vinkje. Inkoopafdelingen vragen er steeds vaker naar, en sinds juni 2025 gelden de Europese toegankelijkheidsregels voor meer webshops. Maar het praktische argument is sterker: er wordt besteld met handschoenen aan, op een telefoon met een gebarsten scherm, in een werkplaats waar het licht niet meewerkt.
Wat het oplevert
De inkoper merkt een shop die er meteen staat, ook op een matige verbinding. De mensen van Mijnheer zelf merken idealiter niets: hetzelfde design, dezelfde werkwijze, geen herleren. Dat was precies de bedoeling.
Wat er verder ligt, is een frontend waarin een wijziging weer een middag kost in plaats van een week. Er staan nog twee dingen op de lijst: de productfoto's in WebP laten uitleveren door de afbeeldingsdienst, en de checkout. Die staan er als volgende stap op, niet als losse eindjes.
