-

Keuze voor headless e-commerce zorgt bij Budgetplant voor verdubbeling conversie

Budgetplant heeft de online conversie in korte tijd ruim weten te verdubbelen. Interessant om te zien is dat de keuze voor headless e-commerce en een progressive web app (PWA) hier in grote mate aan hebben bijgedragen. Hoe hebben twee technische keuzes voor extra omzet gezorgd? En wat zijn de voor- en nadelen ervan?

Met inmiddels dertig jaar ervaring in het leveren van tuin- en haagplanten is Budgetplant uitgegroeid tot een omnichannel speler. Behalve een fysieke vestiging van dertigduizend vierkante meter winkeloppervlak beschikt het bedrijf over een belangrijk online verkoopkanaal. Het is te verwachten dat het aantal digitale kanalen waarop het bedrijf actief is zal toenemen. Die ontwikkeling is immers zichtbaar bij meer retailers. Het naderende einde van de support op Magento 1 maakte het daarom noodzakelijk na te denken over een toekomstgerichte architectuur die zowel een groeiend aantal digitale als fysieke kanalen ondersteunt.

Daarbij ging al snel de voorkeur naar headless e-commerce. Anders dan bij standaard e-commerceplatformen zijn de back-end en front-end interface hierin van elkaar losgekoppeld. De back-end geeft door middel van API’s endpoints inhoud door aan een zelf te ontwikkelen interface. Dat kan de interface zijn van een webwinkel, maar ook net zo goed die van een smart watch, slimme speaker of een native app. Theoretisch is daardoor ieder toekomstig digitaal kanaal gemakkelijk te koppelen en in te spelen op nieuwe gebruikersbehoeften. De API’s zorgen voor de juiste informatie-uitwisseling tussen de voor klanten zichtbare buitenkant en de systemen onder de motorkap.

Die eigenschap is belangrijk nu retailers een steeds grotere mate van flexibiliteit moeten bezitten. Zoals onderstaand overzicht laat zien spelen veel bekende e-commerceplatformen en CMS’en inmiddels in op deze trend. In het geval van Magento ben je vanaf versie 2.3.0 bijvoorbeeld niet meer gedwongen te werken met thema’s. Wie de headless-functionaliteit gebruikt heeft de volledige vrijheid om op basis van eigen technieken een gebruikersinterface te bouwen. Magento wordt dan uitsluitend gebruikt voor datgene waar het goed in is: de databaselogica en functionaliteiten voor e-commerce.

Vrijheid en schaalbaarheid

In onze aanpak hebben we er vanuit gracious samen met Budgetplant voor gekozen te starten bij het design. Omdat we daarin dus alle vrijheid hadden, is de nadruk komen te liggen op de gebruikerservaring. Ten opzichte van de oude webwinkel zijn bijvoorbeeld meer overzicht, ruimte en duidelijke interactiepatronen toegevoegd.

Ingrijpender nog is dat de interface is ontwikkeld als progressive web app (PWA) op basis van React. Door middel van zogeheten service workers zijn allerlei functionaliteiten in te bouwen die normaal vooral in native apps beschikbaar zijn. Zo worden grote delen van de shop gecached waardoor de inhoud ook (mobiel) offline beschikbaar is, is de webapp te installeren op een mobiele telefoon en zijn er pushberichten te sturen. Precies zoals een native app dus, maar dan vanuit de webbrowser.

Een belangrijk voordeel van een PWA is bovendien de door gebruikers ervaren laadtijd. Door code splitting toe te passen zijn we in staat op de achtergrond pagina’s op te knippen en delen vervolgens te laten cachen. Natuurlijk wil je als e-commercebedrijf gebruikers wel de meest recente data tonen, een connectie naar de backend is dus belangrijk. Op zulke momenten wordt er gewerkt met skeleton screens – grijze vlakken in de pagina die de gebruiker duidelijk maken dat het laden van bijvoorbeeld de afbeelding nog even duurt. Onze eigen analyses laten zien dat de ‘perceived loading time’ – het gevoel van snelheid – positief door wordt beïnvloed.

Gelukkig is de bruikbaarheid van Magento als headless oplossing flink toegenomen. Sinds Magento 2.3 is uitgebracht is bijvoorbeeld ook GraphQL beschikbaar. Hierdoor is het mogelijk om per API-call te bepalen welke data er specifiek benodigd is. De ene keer wil je bijvoorbeeld alle categoriedata uitlezen, op andere moment alleen de titels. Die verfijning zorgt voor minder onnodig verkeer en een hogere snelheid. Omdat we hebben gekozen voor Google Kubernetes zijn piekmomenten bovendien nog gemakkelijk op te vangen met extra cloudcapaciteit. Dat maakt bijvoorbeeld ook de marketing een stuk flexibeler.

Welke voordelen hebben we ervaren?
  • Performance en minder complexiteit: Door de lagen de splitsen is er een duidelijker onderscheid is specialisme wat het doorvoeren van optimalisaties gemakkelijker maakt. De front-end is bijvoorbeeld uitsluitend gericht op het serveren van content en uitvoeren van acties via API’s. Daardoor is het goed mogelijk de gebruikerservaring en daarmee de conversie te verbeteren.
  • Gemakkelijker uitbreiden: Het toevoegen van nieuwe digitale kanalen is een stuk gemakkelijker. Omdat alle inhoud wordt geleverd vanuit één centrale plek, is de inhoud en waar content wordt gebruikt beter te managen. Ook toekomstig belangrijke kanalen zijn relatief snel ‘in te pluggen’.
  • Vrijheid in design: Bij de ingebruikname van een e-commerceplatform zijn bedrijven doorgaans gebonden aan thema’s of op zijn minst basisregels waarop ze voort kunnen borduren. Een headless architectuur geeft designers de volledige vrijheid te ontwerpen op basis van gebruikersonderzoek of specifieke productkenmerken.
  • Snelle releases en schaalbaarheid: Is het noodzakelijk een wijziging door te voeren in één van de twee lagen dan wordt de andere daardoor nooit geraakt. Het tempo waarmee releases zijn uit te brengen neemt daardoor gemakkelijk toe. Ook de schaalbaarheid wordt positief beïnvloed.  De front-end bestaat praktisch uit HTML, CSS en Javascript, de daadwerkelijke kracht zit dus in de back-end. Is er rondom een campagne meer capaciteit benodigd voor de dataverwerking, dan is die cloudkracht snel uitbreidbaar.
  • Minder overhead: De limitaties van een platform spelen een veel minder grote rol. Het design is daardoor één-op-één over te nemen.

En de nadelen? Soms missen er nog wat functies. Toen Magento startte met headless e-commerce waren bijvoorbeeld nog niet alle API’s beschikbaar. Het is daarom verstandig goed te bekijken of het gekozen platform al in staat is aan alle verwachtingen te voldoen.

De opkomst van deze headless architectuur sluit naadloos aan bij het omnichannel denken. Het wordt immers gemakkelijker om nieuwe kanalen te omarmen en specialistische software-oplossingen te integreren. Niet voor niets heeft Magento aangegeven zich op dit vlak te willen blijven ontwikkelen: voor e-commercebedrijven wordt het op die manier gemakkelijker grote en innovatieve spelers bij te benen en zich met een gebruiksvriendelijke interface te onderscheiden.

Bij Budgetplant is na de overstap de gemiddelde bezoektijd verzesvoudigd en het bouncepercentage met een derde afgenomen. Interessanter nog: de conversie is met 119 procent gegroeid. Daarmee pakt een op het eerste oog technische keuze commercieel zeer gunstig uit.

Deel dit bericht

1 Reactie

Erwin Hofman

Reeds nette scores om over naar huis te schrijven, maar waar tegelijkertijd nog ruimte is voor speling/groei;
Bovenal goed uitgeschreven! In de transitie is headless omwille van backend behoud een verstandige. PWA voor frontend een vernieuwende en populaire.

Maar in plaats van (of aanvullend op) deze twee keuzes, zou ik aan buitenwereld juist (ook) laten lezen waarom voortborduren op Magento’s eigen frontend geen verstandige bleek, en dat elk andere techniek (losgekoppeld van Magento uiteraard) tot verbeteringen had geleid.

Dat verbeteringen indrukwekkend zijn staat buiten kijf. Echter, de FMP dat (momenteel) belangrijkste metric is om perceived performance/user experience in kaart te brengen, komt uit op 4.8 seconden in Google Lighthouse testomgeving (Moto G4 met mobiel internetabonnement):
https://developers.google.com/speed/pagespeed/insights/?hl=nl&url=https%3A%2F%2Fwww.budgetplant.nl%2Famaryllis-per-1-amaryllis-gestreept

Kijkend naar CRuX data, laat het zelfs zien dat de site door werkelijke bezoekers tweemaal zo traag wordt ervaren (2,0s werkelijke FCP / 0,8 lab-data).
Te trekken conclusie is dat doelgroep gemiddeldweg niet nieuwste devices gebruikt en/of er veelal sprake is van situationele invloeden (onderweg, grens/dekkingsgebieden, type internetabonnement) bij het bezoeken van de site, waar/terwijl anticiperen op dit gegeven nog bevorderlijker zal zijn voor conversie.

Kans is dus dat meer bounces dan nodig is, nog plaats vinden.
Voornaamste reden: JavaScript dat ondanks ‘code splitting’ alsnog met PWA gemoeid gaat (te zien in onderdeel “Primaire thread bewerkingen”).

Uiteraard kan PWA de performance verbeteren voor éénmaal gelande bezoekers, maar kan bounce-rate voor firsttime visitors verhogen.
Gevolg: De conversie voor blijvende gebruikers kan daarom stijgen, terwijl statistieken van afhakende gebruikers t.o.v. vorige langzame Magento-omgeving niet op hoeft te vallen.

Headless en PWA beschouw ik als gezonde opties bij frontend-herbouw van een shop, maar waar het onderdeel performance tbv UX/conversie tegelijkertijd in praktijk dus nog te weinig aandacht ontvangt (en behaalde resultaten blind kan maken voor werkelijke performance en user experience issues).

Plaats een reactie

Uw e-mailadres wordt niet op de site getoond