Comment Truebil a choisi le Web pour se développer

Une start-up raconte l'histoire de la création d'une expérience Web exceptionnelle.

À propos

Fondée en 2015, Truebil est une place de marché en ligne indienne qui vend des voitures d'occasion 100% certifiées. Comptant plus de 1, 4 million d'utilisateurs actifs par mois, cette solution tout-en-un inclut le transfert de propriété, les assurances, les prêts et les garanties de service. Les clients potentiels peuvent consulter les pages de produits individuelles avec des images et des rapports d'inspection détaillés, et évaluer les véhicules grâce aux fonctionnalités "Comparer" et "Truescore" du site. Truebil différencie son produit grâce à des fonctionnalités enrichies, y compris des recommandations personnalisées basées sur le machine learning, une fonctionnalité d'ajout aux favoris, une fonctionnalité de partage de voitures et plus encore.

Défi

Truebil est une start-up légère proposant des transactions de faible fréquence et de grande valeur. Il était donc essentiel de choisir la bonne plate-forme à privilégier et dans laquelle investir.

Truebil Lite a décidé de cibler les mobiles comme sa plate-forme cible et a choisi le Web pour sa première application, Truebil Lite, en raison de sa facilité de découverte et de la simplicité d'utilisation du Web. La technologie Web permet de réduire les coûts de développement, d'utiliser moins de données et de mémoire, et de réduire considérablement les coûts d'acquisition des clients par rapport à la création d'une application Android/iOS. En créant une progressive web app (PWA), Truebil peut bénéficier de tous les avantages du Web et de ceux d'iOS/Android.

Solution

Il a fallu quatre mois à une équipe interne pour développer Truebil Lite à l'aide de React, Django et Preact (pour la migration en production). Ils ont défini des principes directeurs clairs pour l'application Web, en fonction des objectifs de l'utilisateur. L'expérience devait être la suivante:

• Rapide lors du premier chargement et des navigations suivantes
• Fiables, quelles que soient les contraintes liées au réseau ou à l'appareil de l'utilisateur ;
• Il est attrayant, en particulier pour les petits écrans mobiles, et les utilisateurs auront envie d'y revenir.

Optimisez la rapidité du premier chargement et des navigations.

En s'appuyant sur Lighthouse pour guider l'optimisation des performances, l'équipe a adopté une culture axée sur les performances lors de la mise en œuvre de nouvelles fonctionnalités. Truebil a considérablement amélioré l'expérience utilisateur en donnant la priorité aux métriques First Contentful Paint et Délai avant interactivité (TTI), et en optimisant la rapidité des premiers chargements, des visites répétées et une navigation fluide. L'équipe a atteint ces résultats en définissant des budgets de performances et en utilisant diverses techniques pour y parvenir.

Définir des budgets de performances

Privilégiant les performances, l'équipe Truebil a choisi de concevoir son expérience en tant qu'application monopage, avec rendu côté serveur pour le premier chargement et rendu côté client pour les chargements suivants. Il peut être difficile de maintenir les performances des applications Web avec un rendu côté client. C'est pourquoi Truebil a défini des budgets de performances très stricts pour s'assurer qu'elles ne font aucun compromis sur la vitesse, notamment lorsqu'elles ajoutent des fonctionnalités.

L'équipe a défini des budgets stricts basés sur des jalons pour l'TTI, avec pour objectif de le maintenir en dessous de cinq secondes. Pour atteindre cet objectif, elle a veillé à ce qu'aucun build ne dépassait la taille du bundle JavaScript de 250 Ko, a contrôlé en permanence la taille des images et effectué un suivi continu du score de performances Lighthouse de l'application.

Optimiser les groupes JavaScript

L'équipe a commencé par les bases en utilisant le modèle PRPL pour mettre en pré-cache et optimiser les charges utiles JavaScript, puis en passant à HTTP/2 pour diffuser les bundles JavaScript critiques.

Pour effectuer le chargement différé des ressources non critiques, l'équipe a utilisé ses composants de chargement différé au niveau du framework afin de charger les fragments en dessous de la ligne de flottaison.

Pour éliminer les goulots d'étranglement des bundles JavaScript, l'équipe a réduit les charges utiles en fractionnant le code. Elle a utilisé la segmentation basée sur des composants et des routes pour réduire la taille du bundle principal et améliorer son temps de chargement de 44 %, avec un TTI de 6 secondes à environ 5 secondes et First Meaningful Paint (FMP) de 4,1 à 3,6 secondes.

.

Intégrer le CSS critique

Pour améliorer encore davantage la plate-forme FMP, l'équipe a utilisé Lighthouse afin de trouver des opportunités et de valider l'impact des optimisations de performances. Lighthouse indique que réduire le code CSS bloquant l'affichage aurait le plus d'impact. Truebil a donc intégré tous les CSS critiques et différé les CSS non critiques. Cette technique a permis de réduire la FMP d'environ deux secondes.

Évitez les allers-retours multiples et coûteux vers n'importe quel point de départ

Pour limiter les frais généraux liés au DNS et à TLS, Truebil a utilisé <link rel="preconnect"> et <link rel="dns-prefetch">. Avec cette approche, le navigateur effectue le handshake TLS dès que possible lors du chargement de la page et pré-résolve les noms de domaine multi-origines, ce qui permet une expérience utilisateur rapide et sécurisée.

Précharger dynamiquement la page suivante

En analysant ses données, l'équipe a identifié les parcours utilisateur les plus courants pour lesquels elle pourrait optimiser. Dans ce cas, l'application télécharge dynamiquement la ressource de page suivante à l'aide de <link rel=prefetch> afin de garantir une navigation fluide pour les utilisateurs. Alors que l'équipe identifie manuellement les liens à précharger, elle utilise webpack pour regrouper le JS pour ces liens.

Optimiser les images et les polices

Les images jouent un rôle essentiel dans la crédibilité et l'expérience produit de Truebil. Chaque fiche produit peut contenir jusqu'à 40 photos. Pour s'assurer que les images ne bloquent pas le chargement des pages, l'équipe a choisi de diffuser toutes ses ressources à partir d'un CDN et d'utiliser imagemagick pour l'optimisation des images. Toutes les ressources compressibles, y compris les images, JavaScript et CSS, ont également été compressées avec gzip afin de réduire davantage le temps de chargement.

Pour éviter le flash de texte invisible tout en réduisant au maximum le temps de chargement, Truebil a configuré son CSS de sorte qu'il utilise les polices système en remplacement jusqu'à ce que les polices externes soient chargées.

Autres optimisations

Lorsque l'application était prête, l'équipe a voulu réduire davantage la taille du bundle du fournisseur et le temps d'exécution de JavaScript. Elle a donc basculé son application React vers Preact en production. (Pour en savoir plus, consultez la collection React.) Cette approche lui a permis de réduire la taille du bundle du fournisseur de 82,3 Ko à 51,2 Ko.

Fiabilité intégrée

En s'intéressant plus particulièrement au marché indien, la grande majorité des utilisateurs de Truebil accèdent à leur produit via des réseaux instables qui tombent parfois dans des bandes passantes allant jusqu'à 2G. Il était donc essentiel de créer une expérience résiliente non seulement pour améliorer les performances dans des conditions de réseau limitées, mais aussi pour fournir aux utilisateurs un produit qui fonctionne toujours.

Stratégie de mise en cache hybride pour un chargement fiable

L'interactivité et le taux de changement du contenu Truebil varient considérablement. Pour s'assurer que tout son contenu est à la fois récent et fiable, l'équipe Truebil a implémenté la mise en cache des API à l'aide d'une combinaison de stratégies axées sur le réseau, sur le cache et sur le plus rapide.

Pour les pages statiques, telles que la page des abonnements, Truebil utilise une stratégie axée sur le cache pour accéder en premier au cache de l'API d'abonnement, puis revenir au réseau.

Pour les pages dont le contenu dynamique change rarement, comme les fiches produit ou les pages d'informations, Truebil utilise une stratégie axée sur le réseau. Ainsi, le navigateur vérifie d'abord le contenu sur le réseau avant de revenir au cache de l'API si le réseau n'est pas disponible.

Pour les pages dynamiques qui changent souvent, telles que les pages d'accueil, de filtrage, de recherche et de villes, Truebil utilise la stratégie la plus rapide pour choisir entre le réseau ou le cache, en fonction de la première éventualité. Pour garantir l'actualisation du contenu, le cache est mis à jour chaque fois que la réponse du réseau diffère de celle du cache.

Service workers pour une expérience hors connexion complète

Même si une grande partie du contenu de Truebil est très dynamique (il est possible d'ajouter ou d'acheter une voiture à tout moment), l'équipe voulait s'assurer que les utilisateurs pouvaient interagir avec certains contenus, même s'ils utilisaient des réseaux instables ou étaient complètement hors connexion.

À l'aide de service workers, l'équipe a pu mettre en cache des données statiques et des données dynamiques avec lesquelles un utilisateur avait déjà interagi, afin que celui-ci puisse les consulter hors connexion. Pour s'assurer que les utilisateurs savent que le contenu pourrait changer lorsqu'ils se reconnecteront, l'équipe a modifié l'interface utilisateur en nuances de gris pour indiquer le mode hors connexion. La navigation sur les pages de produits constitue une partie essentielle du parcours de l'utilisateur de Truebil. Les utilisateurs qui ont consulté la PWA au moins une fois peuvent parcourir les fiches et les pages de produits qu'ils ont déjà consultées, mais ne voient pas les mises à jour de la fiche ou du produit.

Améliorez l'engagement pour fidéliser les utilisateurs

Une première expérience attrayante

Étant donné que la plupart de ses utilisateurs proviennent de canaux payants, Truebil voulait compléter son application Web qui se charge rapidement par un produit proposant des recommandations très pertinentes pour augmenter les conversions. Bien que l'équipe utilise un système de recommandation basé sur un filtrage sophistiqué pour les utilisateurs existants, son système ne fonctionne pas pour les utilisateurs qui se connectent pour la première fois.

Pour éviter d'inciter les nouveaux utilisateurs à démarrer à froid, l'équipe a intégré un système de recommandation dans le cadre de ses efforts de marketing digital. Ils ajoutent des informations détaillées sur le produit (comme le modèle, le prix et la carrosserie) dans l'URL de destination de l'annonce via un paramètre UTM. Celui-ci est lu par leur système de recommandation et reflété dans les produits qui s'affichent. Si le sysme ne lit pas ces informations dans l'URL, il utilise les voitures populaires, qui combinent des modèles populaires, des budgets populaires et des voitures populaires au cours des dernières semaines ou des derniers jours.

Une application Web installable

Après avoir créé une application Web rapide, dotée de nombreuses fonctionnalités et offrant une expérience utilisateur convaincante, Truebil a souhaité s'assurer que ses utilisateurs reviennent. Elle s'est rendu compte que rendre l'application installable rendrait les visites répétées beaucoup plus fluides.

L'équipe a implémenté la fonctionnalité Ajouter à l'écran d'accueil pour que son produit devienne une progressive web app (PWA) complète. Cette approche a permis aux utilisateurs d'ajouter Truebil Lite à l'écran d'accueil et de le lancer en mode plein écran. Et comme l'équipe avait déjà implémenté un mode hors connexion, elle a pu ajouter facilement cette nouvelle fonctionnalité.

Pour s'assurer que ses utilisateurs n'ont pas reçu de spam et augmenter les chances qu'ils installent l'application, l'équipe a récemment modifié sa stratégie de promotion de l'installation de PWA. Les invites d'installation s'affichent alors au moment où elles peuvent être utiles à différents types d'utilisateurs. Truebil a choisi une stratégie en trois parties:

• Afficher des invites lorsque l'utilisateur a effectué une action ou est inactif.
• Afficher des invites contextuelles destinées à des utilisateurs adultes
• Afficher une bannière lorsque l'utilisateur a passé un certain temps sur le site.

Bannières par défaut à la fin du processus et sur les pages à fort trafic

L'équipe a décidé d'afficher une bannière d'installation lorsqu'un utilisateur effectue une tâche ou se trouve sur des pages à trafic élevé, mais qu'il est inactif (c'est-à-dire lorsqu'il n'effectue pas d'action, comme faire défiler ou remplir un formulaire). Cette approche lui a permis d'éviter d'interrompre l'activité de l'utilisateur.

Invites contextuelles pour les utilisateurs adultes

Pour les utilisateurs qui avaient interagi avec l'application depuis un certain temps, l'équipe a utilisé des messages personnalisés très contextuels pour montrer l'intérêt d'installer l'application sur l'écran d'accueil:

Bannière personnalisée pour les invites temporelles

Enfin, l'équipe a créé une bannière non intrusive dont le design ressemble à une notification et se déclenche lors d'événements spécifiques, comme l'ouverture d'une page de fiche ou après que l'utilisateur a passé un certain temps dans l'application:

Grâce à ces améliorations, les taux de conversion et d'engagement de Truebil ont considérablement augmenté, avec 26% de sessions utilisateur plus longues et 61% de conversions supplémentaires. Ce chiffre est significatif pour l'entreprise, compte tenu de la valeur de transaction élevée de chaque conversion.

Pour une start-up disposant de ressources limitées, choisir la bonne plate-forme peut être essentiel à la réussite de l'entreprise. En adoptant une PWA axée sur la vitesse, la résilience et l'engagement, nous avons pu augmenter nos revenus marketing de 80% grâce à une augmentation des conversions et à la fluidité de la couverture du Web.

Rakesh Raman, cofondateur et responsable produit et science des données chez Truebil