Progressive Web Apps, 'the next big thing'?
Groei in conversie, toppositie in Google en meer engagement, wij verwelkomen Progressive Web Apps als nieuwe ontwikkelmethode. Een Progressive Web App - ook wel PWA genoemd - is voor velen nog een relatief nieuw begrip, maar de interesse is zeker gewekt. Gartner Research voorspelt zelfs dat in 2020, minimaal de helft van alle native apps wordt ingeruild voor een PWA. Worden PWA’s echt ‘the next best thing’? En wat is onze ervaring met de ontwikkeling en prestatie van een PWA? Dat lees je in onze blog.
Wat zijn PWA’s en waarom wil ik het?
Een PWA slaat de brug tussen de functionaliteiten van een website en die van een native mobiele app. Het biedt daarmee ‘the best of both worlds’. Ze zijn snel, altijd up-to-date, scoren in zoekmachines en ze kunnen zonder download opgeslagen worden op een mobiel apparaat. Daarnaast zouden ze het conversieratio een enorme boost kunnen geven.
Meer over PWA's
Alle voor- en nadelen, wanneer je het wel en niet moet inzetten en een aantal voorbeelden vind je in onze longread waar we dieper ingaan op deze relatief nieuwe technologie. Klik hieronder op de blauwe button en ontdek de mogelijkheden voor jouw (e-commerce) organisatie en hoe je zelf met PWA’s aan de slag gaat.
Werkt een PWA écht?
Veel organisaties die gebruik maken van een PWA zien een stijging in het aantal conversies. Voor een groot deel is dit te danken aan de snelheid van een PWA, snelheid heeft immers een enorm effect op je conversieratio. Zo wijst onderzoek van Google uit dat 53 procent van je bezoekers je website verlaat wanneer de laadtijd meer dan 3 seconden is. Aliexpress ervaarde ook de voordelen van een PWA. Door gebruik te maken van een PWA zagen zij het aantal conversies met 104 procent stijgen. PWAstats.com verzamelde de volgende resultaten:
- Het Best Western River North Hotel zag de omzet met 300 procent toenemen met hun nieuwe PWA.
- De nieuwe PWA van OpenSooq’s heeft een groei in engagement doordat bezoekers 25 procent langer op een pagina blijven. Dit heeft geleid tot 260 procent meer leads.
- Lancôme ziet door het gebruik van een PWA de conversie groeien met 17 procent.
- Uber’s PWA is zo ontwikkeld dat deze zelfs op 2G snel is en heeft maar 3 seconden nodig om te laden als de bezoeker een 2G netwerk heeft. Dus zelf met een trage internetverbinding is de PWA goed te gebruiken.
- Tinder heeft met hun nieuwe PWA de laadtijd van 11.91 seconden teruggebracht naar 4.69 seconden.
- Pinterest heeft de mobiele website omgebouwd tot een PWA en zag de core engagement stijgen met 60 procent.
- De Japanse Nikkei heeft de conversie met 58 procent heeft zien toenemen door het gebruik van een PWA (bron).
Onze ervaring met PWA's.
Om te kunnen blijven innoveren in e-commerce hebben we afgelopen jaar in een innovatiesprint van twee weken een PWA gebouwd, zonder een vast framework of template. Zo konden we goed onderzoeken wat de mogelijkheden én de uitdagingen zijn tijdens het ontwikkelen. Voor ons was het grootste voordeel de vrijheid in keuze van het beste platform, waar je normaal beperkt in kan zijn.
In de innovatiesprint hebben we ervoor gekozen om te werken met een Magento 2.3 backend en VueJS als frontend. Met de komst van Magento 2.3 is de PWA studio gelanceerd. Hiermee is het mogelijk om via de API de data vanuit Magento op te halen en te kunnen tonen aan de voorkant. VueJS is relatief eenvoudig te begrijpen voor developers, er is er veel documentatie beschikbaar en het werkt erg snel. Met de combinatie van Magento en VueJS is de PWA 'Vuegento' geboren. Deze is te bekijken via: www.vuejs.bluebirdday.io/vuegento/
Tijdens de innovatiesprint hebben we veel kennis opgedaan over het bouwen van PWA en de verschillende elementen die hierbij komen kijken. Het is momenteel nog veel maatwerk, omdat nog niet alle Magento modules PWA compatible zijn. Ook nog niet alle browsers ondersteunen een PWA volledig. Het grote voordeel is wel dat alles snel werkt en dat de PWA goed scoort in Google. En voor ons was het een leerzame en leuke ervaring.
PWA voor onze klant JanVanSundert.nl
Voor onze klant Jan van Sundert, de keuken- en badkamerspecialist van Etten-Leur, hebben we ook een PWA ontwikkeld op basis van VueJS en Magento. De website is daarmee een stuk gebruiksvriendelijker geworden, mede doordat de snelheid enorm is toegenomen. Dat is te zien in onderstaande Google Lighthouse rapportages van de situatie zonder PWA (links) en met PWA (rechts). In onderstaande rapportages zie je dat de snelheidsindex (hoe snel de content van een pagina zichtbaar is) met 15.1 seconden is toegenomen en de tijd tot interactie (de hoeveelheid tijd die nodig is voordat een pagina volledig interactief is) met 41.3 seconden. Een stuk sneller en gebruiksvriendelijker dus!
Weten hoe je je website optimaliseert? Ontdek het in ons gratis e-book over web performance waarin we toelichten wat performance is, hoe je het zelf optimaliseert en welke punten je uitbesteedt bij je development bureau.
PWA’s, 'the next best thing'?
Volgens Google zijn PWA’s ‘the next best thing’ in e-commerce. Wij zijn ook enthousiast over deze relatief nieuwe manier van ontwikkelen. Met het steeds groter worden van mobile en andere touchpoints en het vervullen van een optimale gebruikerservaring wordt een snel werkende omgeving nog belangrijker. Een PWA zou dan de uitkomst zijn.
Echter, PWA’s worden op dit moment nog niet in alle browsers ondersteund en de extensies zijn nog niet PWA ready. Er is een shift gaande, bijvoorbeeld met de komst van PWA Studio en steeds meer modules die PWA compatible zijn. Ondanks de vele voordelen en de kansen die het biedt in de toekomst, is het voor nu de vraag of een PWA de tijd en investering van het ontwikkelen waard is. Het antwoord op die vraag hangt af van de wensen van de klant. Wij kijken altijd samen met de klant naar de best mogelijke oplossing voor de huidige situatie, strategie en het beoogde doel.
PWA's voor jouw business?
Hi! Ik ben Carola, support coördinator bij Bluebird Day! Heb ik je nieuwsgierigheid gewekt? Neem gerust contact met me op. Ik kijk graag met je mee naar jouw specifieke uitdagingen en ambities.
