Lecture 10 minutes
Aujourd’hui, près des deux tiers des consultations de pages web se font depuis un mobile. En atteste la courbe d’évolution de la répartition du trafic entre mobile, desktop et tablette. Tout porte à croire que cette évolution n’est pas terminée et que l’ère du “mobile first” a encore de beaux jours devant elle. Conscientes de cet état de fait, les entreprises sont amenées à se poser une question importante lors de la refonte de leur plateforme e-commerce : ai-je besoin d’une application mobile en complément de mon site e-commerce ? La PWA est-elle une bonne alternative ?
Les avantages et inconvénients d'une application mobile
- Peut fonctionner en mode offline dans certaines conditions
- Propose une expérience utilisateur plus fluide, intuitive et optimisée
- Renforce la notoriété d’une marque
- Bénéficie d’un accès aux composants d’un mobile (GPS, Bluetooth, caméras…)
- Permet la réception de notifications natives de l’appareil
Mais elle comporte également son lot d’inconvénients :
- Maintenance plus difficile, dépendante du modèle de mobile/tablette.
- Développement plus (très) coûteux
- Compatibilité mobile plus restreinte, par la plateforme (Android, iOS…)
- Audience limitée aux mobiles et tablettes
- Nécessite une action de l’utilisateur (installer une app)
- Ne peut se substituer à un site web, obligeant ainsi à maintenir deux outils distincts
Il apparaît donc que l’application mobile de vente bien que comportant son lot d’avantages possède de tels coûts de mise en œuvre et de maintenance qu’elle représente un investissement qui fera difficilement l’unanimité.
Face à ce constat, une alternative à l’application mobile a émergé à l’initiative de Google : une technologie permettant de tirer parti de son site e-commerce et de lui rendre accessibles tous les avantages qui, auparavant, étaient réservés à l’application mobile. Il s’agit de la PWA (Progressive Web App) !
Le concept de la Progressive Web App (PWA) en détails
Des bonnes pratiques
Dans les grandes lignes, une Progressive Web App est comme une application mobile, au détail près qu’elle repose sur un site web responsive.
Réalisée dans les règles de l’art, elle apporte à un site des fonctionnalités typiques du monde mobile, comme une navigation sans rechargement de page, l’envoi de notifications, l’ajout d’un raccourci sur l’écran d’accueil ou la navigation offline.
Par ailleurs, le concept de PWA regroupe un certain nombre de bonnes pratiques visant à optimiser l’expérience utilisateur en la rendant la plus proche possible de l’expérience offerte par une application native.
Parmi ces bonnes pratiques, certaines sont cruciales et d’autres beaucoup plus optionnelles :
- Le site doit être responsive.
Ne perdons pas de vue qu’une PWA affiche la version mobile d’un site. Il est donc crucial que cet affichage soit optimisé pour tirer le meilleur parti de ce support. - Le site doit posséder un manifest.
Cela pour permettre son installation sur l’écran d’accueil des mobiles. - La compatibilité restreinte avec certains navigateurs et terminaux ne doit pas être un frein
Propulsées par Google, les PWAs reposent sur des fonctionnalités avec lesquelles son navigateur Chrome est évidemment compatible. Aujourd’hui, la majorité des navigateurs du marché sont capables de faire convenablement fonctionner un site PWA. - Le site doit être sécurisé
Normalement, votre boutique propose déjà une navigation sécurisée. Si vous avez un doute, le moyen le plus simple de vous en assurer est de vérifier la présence d'un petit cadenas dans la barre d'URL de votre navigateur. - Le site peut envoyer des notifications
Sans qu’il s’agisse là d’une obligation, les notifications sont un canal de communication privilégié avec vos clients, rendu possible par la PWA. - Le site peut proposer une navigation partielle en situation déconnectée Peu applicable à l’e-commerce, la navigation offline sur les aspects liés au catalogue peut malgré tout s’avérer être un plus dans certaines situations particulières.
Et une architecture optimale
Même si, en théorie, le “label” PWA laisse pas mal de libertés, une architecture PWA optimale se décompose souvent de la manière suivante :
- Une application front-office Javascript construite sur l’un des frameworks les plus populaires du moment (React, VueJs…). Elle est en charge de la gestion de l’obtention et de la restitution de la donnée. C’est cette application qui gère l’affichage des pages et leur intégration responsive. Souvent SPA (Single Page Application), cette application apporte la même fluidité qu’une application mobile en gommant les rechargements de page au profit de rafraîchissements asynchrones.
- Une application back-office possédant une couverture totale de ses fonctionnalités via API. Elle est en charge de la réception des requêtes de l’application front-office, de la récupération des données nécessaires à l’affichage. C’est cette application qui stocke la donnée et permet l’administration de celle-ci par les équipes métier.
Cette architecture couplée à un manifest (pour l’installation sur mobile) permet de fournir aux utilisateurs une expérience se rapprochant à s’y méprendre de celle d’une application mobile.
Comment savoir si j’ai besoin d’une PWA ?
L’intégration d’une PWA s’adresse à tout e-commerçant souhaitant tirer le meilleur parti de sa plateforme e-commerce que ce soit sur mobile ou sur desktop. Opter pour une PWA c’est également laisser derrière soi les problèmes les plus fréquents du e-commerce. Des problèmes de performances, une expérience client dégradée et donc :
- Une durée moyenne de sessions faible.
- Un taux de conversion e-commerce faible.
- Un taux de rebond important.
- Un retour de visiteurs faible.
Il est important de noter que, si la navigation mobile représente la majeure partie du trafic des sites, les consommateurs sont aussi beaucoup plus exigeants que sur desktop. Le taux de conversion d’un site mobile n’est optimal que si un soin tout particulier est apporté à l’expérience utilisateur. Performance, ergonomie et mobile first sont les clés de la réussite !
Pour rappel, la moitié des utilisateurs quitteront votre site s’il met plus de trois secondes à se charger et la moitié de ces mêmes utilisateurs ne reviendront jamais. La première impression doit donc être la bonne pour vous éviter de perdre à tout jamais le quart de votre audience initiale.
À ce jour, choisir une PWA c’est donc mettre de son côté toutes les chances de mieux convertir et de mieux fidéliser, notamment sur les supports mobiles ! C’est également un accès plus direct aux clients au travers des notifications push. En somme, c’est un choix d’avenir.
Sources : Vitesse et taux de rebond (EN), Vitesse et taux de conversion (EN)
Quels sont les impacts d’une PWA sur l’e-commerce en général ?
Bien que la tendance soit encore peu commune dans l’e-commerce, la PWA présente des résultats particulièrement encourageants :
Une meilleure vitesse de chargement des pages
L’un des principaux avantages de la PWA réside dans le gain de performances qu’elle permet d’obtenir. L’expérience client sur un site PWA est plus fluide, les temps de chargements plus courts, les rechargements de page inexistants.
Cet impressionnant gain de performances repose sur trois aspects qui rendent les applications classiques (de périmètre fonctionnel équivalent) incapables de rivaliser :
- La mise en cache :
Grâce au concept de service worker, les applications PWA sont capables de stocker des données que les applications classiques devaient auparavant systématiquement demander au serveur. C’est ce concept qui rend possible toute ou partie de la navigation offline possible sur le site. Tous les éléments ainsi mis en cache sont autant de temps de chargements économisés. Cela permet de rendre l’application plus rapide et fluide. - SPA (Single Page Application) :
Les applications PWA les plus performantes sont généralement des SPA. Ce qui signifie que les sites construits de cette manière ne possèdent pas rechargements de page. Finis donc les écrans blancs après chaque clic. Les données sont chargées par zones favorisant ainsi un design d’attente beaucoup plus qualitatif et une impression de vitesse incomparable. - L’architecture découplée (headless) :
L’application front-office se chargeant de la restitution et de la mise en cache est une application Javascript. À ce titre, elle s’exécute sur le support du client dont la puissance de calcul est ainsi mise à profit. Auparavant, le calcul des données de la page nécessaires au rendu était entièrement assuré par l’application back-office qui consommait donc bien plus de ressources. Mais avec ce type d’architecture, l’application back-office est dédiée au calcul et à la fourniture/sauvegarde de données plus brutes et moins coûteuses en temps de calcul.
Success story Synolia
Millet Mountain Group, qui a bénéficié d’une refonte de sa plateforme Magento 1 vers Magento 2 PWA studio, a vu la moyenne de ses temps de chargement de pages divisée par deux !
Une augmentation de la durée des sessions
Il est évident que si votre site est rapide et agréable, les utilisateurs y passeront plus de temps. Effectivement, la refonte du site Millet/Lafuma sur PWA studio a permis :
51%
d'augmentation du nombre de sessions mobiles
53%
d'augmentation sur la durée des sessions mobiles (iOS)
+ de 18 000
clients inscrits aux notifications
Une meilleure visibilité
Le référencement des applications mobiles se limite au périmètre des boutiques d’applications (Windows Store, App Store, Google Play), où le nombre de requêtes est plus faible que sur Google.
De plus, le contenu de ces applications n’est pas visible par Google. Une PWA étant avant tout un site au contenu étant pleinement accessible, elle profite de l’indexation par Google où les requêtes sont beaucoup plus nombreuses et confèrent une visibilité plus importante.
Une expérience utilisateur digne de celle d’une application mobile traditionnelle
Sur Windows 10 et sur Android par exemple, votre site s’affiche sous forme d’une icône, comme une application standard. Ainsi, votre marque occupe, en plus de sa place sur internet, une place physique sur l’écran d’accueil de vos clients. C’est plus de visibilité immédiate pour vous et un accès plus simple et plus rapide pour eux.
Un taux de conversion optimisé et CA augmenté
Sur les aspects conversion, chiffre d’affaires, taux d’ajout au panier et panier moyen, ici aussi, les résultats sont sans appel. Un travail ergonomique avancé couplé à une intégration PWA a permis aux marques Lafuma et Millet de réaliser :
Conversion mobile + 207%
depuis la mise en ligne des sites PWA
+73%
d’ajouts au panier
CA mobile x4
10% du CA global avant vs. 45% après la refonte
+8%
sur le panier moyen des clients
Lancez-vous !
La PWA se présente comme une très bonne réponse à certains problèmes rencontrés sur mobile par les e-commerçants mais aussi par leurs clients. Avec des performances d’affichage accrues sur mobile, les clients bénéficient d’une expérience de navigation plus réactive et partiellement indépendante du réseau ! Ils sont donc susceptibles de passer plus de temps et davantage de commandes sur votre boutique. Et donc d’augmenter votre conversion !
Aussi, pensez bien que permettre à vos utilisateurs d’ajouter votre boutique à leurs écrans d’accueil revient à leur ouvrir une boutique à côté de chez eux. L'icône sur un écran d’accueil apporte une visibilité et une accessibilité immédiate à votre boutique. Bien mieux qu'un lien enregistré parmi des dizaines de favoris dans le navigateur... Enfin, si l’utilisateur quitte votre site, les notifications sont là pour l’inviter à revenir ! Elles le tiennent informé des nouveautés, de l’évolution d’une commande, du retour en stock d’un produit ou même d’une offre promotionnelle.
Face à l’engouement de grandes marques et aux bénéfices de la PWA, les éditeurs prennent le sujet en main afin d'apporter des solutions PWA natives. Ainsi, les intégrateurs comme Synolia peuvent accompagner leurs clients vers les meilleurs horizons.
