Le 11 Juin dernier se tenait la 1ère édition des E-Commerce Sessions au FAR, à Paris.
Organisé par l’Agence Dn’D, l’événement a permis à des E-Commerçants de tous les horizons de faire le plein d’informations sur des sujets indispensables pour booster leurs performances en ligne. Après 6 conférences animées par Nosto, Quanta, Resoneo, Artifakt.io, Emarsys et l’Agence Dn’D, la soirée s’est prolongée par un cocktail networking, l’occasion d’approfondir les talks des intervenants et d’échanger autour des dernières tendances du E-Commerce.
Lors de cet événement, Dn’D a choisi d’aborder les PWA pour les sites E-Commerce.
Retour sur ce sujet d’actualité fort et stratégique pour les E-Commerçants !
Les PWA : l’avenir du E-Commerce ?
Nous vous en parlions dans un précédent article : les PWA représentent un atout décisif pour les E-Commerçants désireux d’améliorer leurs performances web. Présentée par Geoffrey CONTE, CTO au sein de l’Agence Dn’D, ce talk orienté Tech a mis en lumière le mode de fonctionnement des Progressive Web Apps, leurs caractéristiques ainsi que leurs nombreux avantages.
Il s’agit d’une technologie dont on entend de plus en plus parler. Une PWA est un site web disponible sur des technologies différentes et dotée de fonctionnalités supplémentaires. Popularisée par Google à partir de 2015, la PWA permet d’agir avec l’API HTML 5 et sur des fonctionnalités telles que le stockage local. De plus, la PWA offre certaines fonctionnalités des applications mobiles tout en étant consultable depuis un navigateur.
Le fonctionnement d’une PWA
Pour faciliter l’accès et le développement de la PWA, on utilise les framework front React, VueJS ou Angular. Pour garantir un fonctionnement en bonne et due forme, il est aussi nécessaire d’avoir recours à deux fonctionnalités essentielles :
- Le Service Worker : l’une des pierres angulaires de la PWA. Le Service Worker a un rôle de proxy, c’est-à-dire qu’il va aiguiller les requêtes au cache si l’on est en mode offline, soit directement au serveur si l’on est en mode online.
- Le Local Storage (indexedDB) : il s’agit d’une base de données embarquée sur le navigateur du client, ce qui permet aux E-Commerçants de stocker toutes leurs données en local et de pouvoir naviguer en mode offline.
En quoi les PWA révolutionnent-elles les usages mobiles ?
Les PWA façonnent de plus en plus nos modes de navigation et offrent de nombreux avantages. La proximité entre les fonctionnalités de la PWA et de celles sur mobile offrent la possibilité aux E-Commerçants de diffuser des notifications push. Ainsi, les PWA permettent d’exploiter les fonctionnalités natives du smartphone pour permettre aux professionnels de la vente en ligne d’atteindre leurs cibles avec plus d’efficacité.
Avec la PWA, le premier chargement stocke les données en local pour y accéder hors connexion et ce, même en cas de réseau réduit ou de coupure de connexion complète. Les mises à jour sont effectuées en background sans encombres et l’expérience shopping est donc améliorée puisque les clients peuvent continuer à préparer leurs achats en mode offline. Cela peut constituer un avantage décisif pour afficher les catalogues produits dans des zones très mal couvertes par le réseau.
Il est important de souligner le fait que les PWA possèdent des coûts de développement inférieurs à ceux d’une application native en mettant à disposition une seule application pour les trois stores du marché : Google PlayStore, l’App Store et le Windows Store. Ce dernier va donc devoir développer 3 applications différentes qui utilisent et nécessitent 3 langages différents (il faut donc multiplier les coûts par 3 afin d’intégrer le marché désiré..). Avec la PWA, il y a une mutualisation des coûts de développement puisque l’on bénéficie d’un seul code source pour une seule application déployable sur tous les supports. Cette notion s’applique aussi pour un E-Commerçant souhaitant effectuer de la maintenance puisqu’il n’aura à prévoir de dépenses que pour une seule application.
Les étapes de checkout influencent considérablement le taux de conversion d’un E-Commerçant. Plus il y a d’étapes, plus un E-Commerçant affronte le risque de voir son client annuler son achat. Ce schéma est identique lors du téléchargement d’une application puisque les Windows Store, App Store et Google PlayStore présentent entre 6 et 8 étapes pour télécharger une application, quand on sait que 20 % des utilisateurs concrétisent l’étape de téléchargement finale ! Or, avec une PWA, on constate une amélioration du taux de transformation dans le sens où cette technologie ne requiert que 2 actions à effectuer :
1. Interagir avec le menu de son OS
2. Enregistrer le site web sur son écran d’accueil
Les enjeux du SEO pour la PWA
Quels peuvent être les impacts du SEO via l’utilisation d’une PWA ? Il s’agit là d’une question que tous les professionnels du web peuvent se poser car effectivement, bien que les PWA disposent d’atouts indéniables, leurs rapports avec le SEO restent une donnée déterminante.
Dans ce sens, l’utilisation de PWA est aussi avantageuse puisque Google prend en compte et favorise le référencement. En effet, les temps de chargement sont améliorés, ce qui apporte un réel plus. Aussi, le référencement de la PWA va être strictement identique à celui d’un site web classique : ainsi, d’autres technologies sont utilisées mais le fonctionnement reste le même.
Il apparaît évident de mettre en lumière AMP, un standard lancé par Google peu de temps avant le lancement du concept de PWA. Il s’agit d’un code open source basé sur le HTML qui permet aux pages web de charger en moins d’une seconde sur mobile grâce au pre-rendering. Cela représente un atout de taille puisque selon une récente étude de Google Analytics menée sur un échantillon de 3700 sites mobiles testés, 53 % des internautes ont quittés la page lorsque le temps de chargement était supérieur à 3 secondes. En permettant une navigation fluide et sans fioritures sur mobile, AMP garantit un meilleur taux de transformation et répond donc à une problématique capitale.
Les concepts de PWA et d’AMP ont totalement été associés pour favoriser le SEO et l’expérience utilisateur, à la fois sur site web et sur mobile. Ils se complètent parfaitement puisque la rapidité de chargement de l’AMP et l’affichage 100 % mobile-friendly offert par le tunnel de conversion de la PWA permet d’obtenir un site mobile rapide, sur lequel on peut finaliser sa commande en quelques clics : c’est l’effet PWAMP !
La compatibilité de la PWA avec les différents navigateurs
La compatibilité d’une PWA avec les différents navigateurs dépend des services HTML 5 utilisés. On peut notamment citer les Service Workers, avec lesquels la majorité des navigateurs sont compatibles. Les navigateurs non-compatibles sont des navigateurs très peu utilisés.
Les PWA du marché pour le E-Commerce
Il y a 4 PWA qui se démarquent sur le marché aujourd’hui :
- PWA Studio : C’est la PWA native développée par la communauté Magento. Sa particularité est qu’elle n’est pas encore disponible en production stable, dans le sens où il y a des fonctionnalités qui vont être implémentées jusqu’en Q4 2019.
- Deity : Cette PWA est issue d’une start-up américaine. Aujourd’hui disponible en Version 1.1, c’est une PWA relativement jeune, très prometteuse, axée sur les performances et moins sur les fonctionnalités.
- Front-Commerce : Contrairement à PWA Studio et Deity, Front-Commerce est une PWA disponible sous licence propriétaire. Cette PWA est développée par une agence montpelliéraine.
- Vue Storefront : La particularité de Vue Storefront est qu’elle est disponible en version 1.9 (son équipe de développement prépare d’ores et déjà une version 2.0). Vue Storefront offre une parfaite stabilité et dispose de beaucoup de sites en production, ce qui témoigne d’une excellente expérience.
Démonstration de Vue Storefront
Pour ses projets E-Commerce et en tant que core partenaire depuis mars 2019, l’Agence Dn’D a choisi la PWA Vue Storefront. Afin d’allier la théorie à la pratique, on peut facilement tester les avantages offerts par la PWA en basculant sur la demo de Vue Storefront. On peut ajouter la PWA à son écran d’accueil et constater qu’il n’y a pas de barre de navigation lors de son ouverture, ce qui s’apparente à une vraie application mobile.
En mettant son smartphone en mode avion, on expérimente la faculté de la PWA à être performante même en mode offline. En effet, après avoir réalisé cela, on constate que l’on est toujours en capacité de naviguer dans son catalogue produit : seul un petit bandeau s’affiche en bas de la page, indiquant que les fonctionnalités peuvent être détériorées suite au mode offline (la seule contrainte ici étant que le paiement nécessite une connexion internet).
E-Commerce Session : Performance en images !
Nous tenons à remercier les équipes de Magento, Artifakt.io, Resoneo, Quanta, Emarsys, Nosto ainsi que l’ensemble des participants pour leur présence à notre première E-Commerce Sessions ! Nous espérons que les talks présentés ont offerts aux E-Commerçants les informations attendues afin de mener une activité de vente en ligne prospère. En attendant de découvrir la prochaine E-Commerce Sessions, nous vous proposons de revenir en images sur cette première édition dédiée à la performance ! 🙂
