Lecture 9 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. Ainsi, 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 cela, les entreprises se posent une question importante lors de la refonte de leur plateforme e-commerce : avons-nous besoin d’une application mobile en complément de notre site e-commerce ?
Les avantages et inconvénients d'une application mobile
Bien qu’assez lourde à mettre en place, l’application mobile offre des avantages que l'on ne retrouve pas avec site e-commerce responsive classique :
- 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…)
- Peut fonctionner en mode offline (dans certaines conditions)
- Permet la réception de notifications natives de l’appareil
Mais elle comporte également son lot d’inconvénients :
- Développement (très) coûteux
- Maintenance difficile, dépendante du modèle de mobile/tablette
- Compatibilité mobile 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 au site web (obligation de maintenir deux outils distincts)
Ainsi, il apparaît que l’application mobile, malgré tous ses avantages, représente d'importants coûts de mise en œuvre et de maintenance. Et c'est un investissement qui ne fait pas toujours l’unanimité.
Face à ce constat, une alternative à l’application mobile a émergé à l’initiative de Google. Il s'agit d'une technologie permettant de tirer parti de son site e-commerce avec tous les avantages d'une application mobile. C'est la PWA (Progressive Web App) !
Le concept de la Progressive Web App (PWA) en détails
Des bonnes pratiques
Une PWA est comme une application mobile, au détail près qu’elle repose sur un site web responsive. En effet, elle apporte 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. Parmi ces bonnes pratiques :
- 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. - Le site doit être sécurisé.
Normalement, votre boutique propose déjà une navigation sécurisée. Pour vous en assurer, vérifiez la présence du petit cadenas dans la barre d'URL de votre navigateur. - Le site peut envoyer des notifications. Il ne s'agit pas d'une obligation, mais les notifications sont un canal de communication rendu possible par la PWA.
- Le site peut proposer une navigation partielle en situation déconnectée.
- La compatibilité restreinte avec certains navigateurs et terminaux ne doit pas être un frein. Propulsées par Google, les PWA reposent sur des fonctionnalités avec lesquelles le navigateur Chrome est évidemment compatible. Aujourd’hui, la majorité des navigateurs du marché sont capables de faire fonctionner un site PWA.
Et une architecture optimale
Par ailleurs, même si le “label” PWA laisse des libertés, une architecture PWA optimale se compose souvent de la manière suivante :
- Front-office :
Une application front-office Javascript construite sur l’un des frameworks les plus populaires du moment (React, VueJs…). Elle est chargée de l’obtention et de la restitution de la donnée. C’est cette application qui gère l’affichage des pages et l'intégration responsive. Souvent SPA (Single Page Application), cette application apporte la même fluidité qu’une app' mobile en gommant les rechargements de page et les rafraîchissements asynchrones. - Back-office :
Une application back-office possédant une couverture totale de ses fonctionnalités via API. Elle est chargée de la réception des requêtes de l’application front-office, de la récupération des données nécessaires à l’affichage (desktop, tablette et mobile). 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 classiques 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 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 s'il propose une expérience utilisateur de qualité. 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’il 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 qui permettent 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é
Search Foresight nous informe que le référencement des applications mobiles est limité 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 d’abord un site et son contenu étant pleinement accessible, elle profite de l’indexation par Google où les requêtes sont beaucoup, beaucoup plus nombreuses et confèrent immédiatement une visibilité plus importante.
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é
Là encore, les chiffres de Millet Mountain Group parlent d'eux-mêmes :
Conversion mobile x2
depuis la mise en ligne des sites PWA
CA mobile x4
10% du CA global avant vs. 45% après la refonte
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 résultats bénéfiques 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.
