Découvrez comment une petite équipe a obtenu de grands résultats en créant une PWA de place de marché attrayante.
Basée à Amman, en Jordanie, OpenSooq est une place de marché de petites annonces axée sur les mobiles qui propose une large gamme de produits et de services dans 19 pays du Moyen-Orient et d'Afrique du Nord.
Problématique
Plus de 85% du trafic d'OpenSooq provient d'appareils mobiles, et ce chiffre ne cesse d'augmenter. De nombreuses personnes dans la région utilisent des appareils bas de gamme dont la capacité de stockage est limitée. Il est donc essentiel que le site mobile d'OpenSooq soit aussi rapide et léger que possible. Cependant, les temps de chargement lents de l'ancien site mobile d'OpenSooq affectaient la satisfaction des clients et entraînaient des taux de rebond pouvant atteindre 49% sur des marchés comme le Koweït.
Pour offrir à ses clients une expérience plus cohérente sur toutes les plates-formes, l'entreprise a réalisé qu'elle avait besoin d'un site Web plus rapide et plus réactif. C'est pourquoi, en juin 2017, l'équipe d'ingénieurs d'OpenSooq a lancé une application Web progressive (PWA).
Une attention particulière portée aux performances et à la fiabilité
Les trois développeurs internes d'OpenSooq ont pu créer une PWA complète avec React et webpack en seulement deux mois et demi.
Pour s'assurer que le site serait rapidement et facilement indexable par les moteurs de recherche, l'équipe a choisi d'implémenter le rendu côté serveur. Près de 28% de ses utilisateurs accédant à la PWA sur des réseaux 2G ou 3G instables, il était essentiel que les utilisateurs aient confiance dans le fonctionnement de l'expérience, quelles que soient les contraintes du réseau. L'équipe a donc implémenté une expérience hors connexion à l'aide de service workers et d'une stratégie de mise en cache avant le réseau. Elle a également utilisé le modèle PRPL pour offrir à ses utilisateurs un chargement instantané.
En adoptant ces bonnes pratiques, l'équipe a pu réduire le temps de chargement moyen des pages (délai avant interactivité) de 4 secondes à moins de 2 secondes. Ils ont ensuite utilisé Lighthouse pour s'assurer que le site restait aussi rapide. Ces efforts ont permis à OpenSooq d'atteindre plus de 1,8 milliard de pages vues par mois.
Plus d'un quart de nos utilisateurs accèdent à la PWA OpenSooq depuis des réseaux de faible à moyenne qualité. La fiabilité était donc essentielle pour maintenir leur engagement. Les services workers et les stratégies de mise en cache nous ont aidés à créer l'expérience utilisateur fiable dont nous avions besoin, en toute simplicité.
Amin Shoman, responsable technique des PWA, OpenSooq
Améliorer le réengagement
Après avoir créé une expérience performante et fiable, l'équipe OpenSooq voulait s'assurer que ses utilisateurs restaient engagés avec le produit. Pour ce faire, ils ont permis aux utilisateurs d'installer la PWA sur leur écran d'accueil et ont ajouté la prise en charge des notifications pertinentes. Cela a permis au site de prévenir les acheteurs de l'interaction des vendeurs avec les requêtes, et les vendeurs de l'activation et de l'expiration des annonces.
Ces améliorations ont permis d'augmenter de 14 % le nombre d'utilisateurs actifs mensuels de l'expérience Web d'OpenSooq. Pour les utilisateurs qui ont installé la PWA, le nombre de pages vues par session a augmenté de 48% et la durée moyenne de la session a bondi de 28 %. OpenSooq a également enregistré une augmentation de 25% de la durée moyenne de visite sur une page et une baisse de 29% du taux de rebond moyen sur tous les marchés.
Perspectives
En seulement quelques semaines, OpenSooq a créé une PWA complète de 23 ko qui offre une expérience cohérente aux utilisateurs sur toutes les plates-formes et tous les navigateurs. Étant donné qu'il est facile de mettre à jour les fonctionnalités sur le Web, l'équipe a commencé par la PWA en lançant et en testant de nouvelles fonctionnalités et de nouveaux parcours utilisateur sur sa PWA avant de les déployer sur d'autres plates-formes.
OpenSooq travaille actuellement sur l'ajout d'une invite d'installation spécifique à la plate-forme et l'intégration de la PWA avec les pages AMP (Accelerated Mobile Pages). Ces améliorations accélèrent encore le chargement des pages et rendent la transition vers l'application spécifique à la plate-forme aussi fluide que possible. En s'appuyant sur les bases de son effort de développement initial, l'équipe OpenSooq continuera de proposer à ses utilisateurs la meilleure expérience possible.
L'importance de développer notre PWA était claire pour la direction et les équipes techniques. Après avoir créé une application Web moderne et l'avoir rendue performante, nous sommes impatients de voir l'impact de notre investissement de deux mois et demi sur nos résultats.
Ramzi Alqrainy, directeur de la technologie, OpenSooq