Verhoog conversie met PWA

CHABOBAGS ontwerpt en verkoopt stoere lederen tassen en accessoires. ‘Chabo’​ betekent vriend, een tas die je persoonlijkheid onderstreept en die je overal met je mee wilt nemen. En met dit in ons achterhoofd hebben we de nieuwe Progressive Web App (PWA) voor Chabo ontwikkeld: de webshop als een professionele en betrouwbare ‘partner’, met de look-en-feel die de persoonlijkheid van Chabobags uitstraalt en die overal en via elk device toegankelijk is.

Op zoek naar een webshop die meegroeit met ambities

CHABOBAGS was toe aan een professionaliseringsslag van hun e-commerce. De webshop draaide op WooCommerce van WordPress en was erg traag tijdens het navigeren. CHABOBAGS zocht naar een passende oplossing voor een nieuwe webshop met snellere laadtijden en de capaciteit om met hun ambities mee te groeien.

Magento 2 is een uitstekende keuze, want met dit e-commerceplatform kan CHABOBAGS eenvoudig haar online kanaal opschalen. Bovendien bestond de wens om meer inzicht te krijgen in de webshop prestaties: iets wat automatisch beschikbaar is in Magento. Daarnaast maakte CHABOBAGS de keuze om de frontend te bouwen met een innovatieve PWA.

Nadat CHABOBAGS de keuze voor Itonomy maakte, nam onze leaddeveloper Robin Rijkeboer al snel plaats aan tafel. Samen met zijn developmentteam vertaalt hij technische vereisten naar usercases en is hij verantwoordelijk voor de technische kwaliteit van de nieuwe Magento-webshop. Robin vertelt ons meer over de totstandkoming en werking van de nieuwe PWA-webshop.

Ontwikkelen met Vue Storefront

“Voor de ontwikkeling van de PWA van Chabobags maakten we gebruik van Vue Storefront”, vertelt Robin. “Vue is een open source framework voor PWA op basis van JavaScript. Dit biedt ons het fundament van de PWA. We hebben zelf de B2B-functionaliteit voor de PWA van Chabobags ontwikkeld en ingebouwd. En deze kennis delen we weer met andere developers via het open source platform van Vue Storefront.”

“PWA staat nog in de kinderschoenen”, geeft Robin aan. “Daarom moesten we nog veel mogelijkheden zelf ontwikkelen. Magento is een compleet e-commerceplatform waar alle functionaliteiten voor een professionele webshop aanwezig zijn. Voor een PWA moeten we dat vooral zelf ontdekken. Bijvoorbeeld de nieuwe B2B-functionaliteit: CHABOBAGS levert aan retailers die hun tassen verkopen. Dit gloednieuwe B2B-framework kunnen we nu voor al onze PWA’s gebruiken.”

Testen met Google Lighthouse

“Met Lighthouse hebben we getest hoe de nieuwe webshop van Chabobags presteert”, vertelt Robin.“ Google Lighthouse meet verschillende aspecten van een online webshop, bijvoorbeeld de snelheid en de optimalisatie voor de zoekmachines. Met deze software zie je direct het verschil in laadtijden tussen een PWA en een ‘normale’ webshop. Op een schaal van 1-100 scoort een ‘gewone’ webshop zonder optimalisaties over het algemeen 15-20 punten, waar een PWA al snel 70-80 punten behaalt.”

PWA-updates en beheer

“Wanneer er een update plaatsvindt op de PWA-omgeving, bijvoorbeeld een nieuwe feature, dan wordt dit automatisch verwerkt op de achtergrond”, geeft Robin aan. “PWA-beheer werkt hetzelfde als bij een webshop. Bij Chabobags werkt Magento aan de achterkant en aan de voorkant werkt de PWA als storefront. Je beheert en past zelf de contentpagina’s eenvoudig aan met zogenaamde storyblocks. Je ziet direct hoe je webpagina eruit komt te zien, terwijl je die aan het bouwen bent.”

PWA is beschikbaar voor elk besturingssysteem

“Waar je native apps specifiek voor Android, Apple of Microsoft moet bouwen, kun je een PWA via elk besturingssysteem benaderen”, zegt Robin. “PWA is nog niet beschikbaar in de Apple of Playstore, maar dat verandert binnenkort. Je kunt een PWA wel in de stores zetten door middleware te installeren: een soort mini-browser app die de PWA inlaadt.”

Het resultaat van de nieuwe PWA-shop

CHABOBAGS geniet van alle voordelen die een PWA-webshop biedt. “Allereerst is de laadtijd van hun webshop significant afgenomen”, zegt Robin enthousiast. “Was dat eerst gemiddeld 4 seconden per webpagina (met uitschieters van wel 8 tot 9 seconden!), nu is dat 1,5 tot 2 seconden voor het eerste webshopbezoek en voor elke vervolgpagina 0,7 seconden. Eenmaal geladen in de browser blijft de PWA enige tijd beschikbaar. Voor Safari is dat ongeveer twee weken en voor Chrome nog langer.”

“Verder is de ervaring voor de webshopbezoeker enorm verbeterd”, gaat Robin verder. “De check-out is eenvoudiger, je kunt bijvoorbeeld betalen met je vingerafdruk. En wanneer er even geen internetverbinding is, blijft de PWA-shop stabiel en kun je gewoon verder winkelen.”

CHABOBAGS is nu in staat om op basis van hun webshopdata gefundeerde beslissingen te nemen om hun webshop verder te optimaliseren. Bovendien richt CHABOBAGS zich met hun nieuwe PWA-webshop niet meer alleen op de B2B-, maar ook op de B2C-markt.

“We zijn blij met weer een tevreden klant met een PWA-webshop die op Magento draait”, aldus Robin. “Voor ons is PWA echt de toekomst “We zien dat Google zwaar inzet op dit concept. Begrijpelijk, want Google is de drijvende kracht achter PWA. De webshops op PWA zien er fantastisch uit en het is een hele vooruitgang qua technieken die worden gebruikt. Bij Itonomy focussen we ons volledig op de ontwikkeling van PWA’s, het is niet iets wat we ‘erbij’ doen. Ons PWA-team groeit, we lopen voorop in PWA en we zijn alweer bezig met de volgende PWA-projecten!”