Comment Truebil a choisi le Web pour se développer

L'histoire d'une start-up qui a créé une expérience Web de premier plan.

Harleen Batra
Harleen Batra

À propos

Fondée en 2015, Truebil est une place de marché indienne en ligne qui vend des voitures d'occasion 100% certifiées. Avec plus de 1, 4 million d'utilisateurs actifs par mois, il s'agit d'une solution tout-en-un qui inclut le transfert de titre, l'assurance, les prêts et les garanties de service. Les clients potentiels peuvent consulter des pages produit individuelles avec des images et des rapports d'inspection détaillés, et obtenir des évaluations des véhicules grâce aux fonctionnalités "Comparer" et "Truescore" du site. Truebil se démarque par ses fonctionnalités riches, y compris des recommandations personnalisées basées sur le machine learning, une fonctionnalité d'ajout aux favoris, une fonctionnalité de partage de voiture, etc.

Défi

Truebil est une start-up efficace qui génère des transactions à faible fréquence et à forte valeur. Il était donc essentiel de choisir la bonne plate-forme à prioriser et à investir.

Truebil a identifié le mobile comme plate-forme cible et a choisi le Web pour sa première application, Truebil Lite, en raison de la facilité de découverte et de la faible friction du Web. La technologie Web offre des coûts de développement inférieurs, une utilisation moindre des données et de la mémoire, et des coûts d'acquisition de clients nettement inférieurs à ceux d'une application Android/iOS. En créant une application Web progressive (PWA), Truebil pouvait profiter de tous les avantages du Web et d'iOS/Android.

Solution

Une équipe interne a mis quatre mois à 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 des utilisateurs. L'expérience devait être:

  • rapide lors du premier chargement et des navigations ultérieures ;
  • Fiable, indépendamment des contraintes liées au réseau ou à l'appareil de l'utilisateur ;
  • Attrayant, en particulier pour les petits écrans mobiles, afin que les utilisateurs aient envie de revenir dessus.

Optimiser le premier chargement et les navigations

En utilisant Lighthouse pour guider les optimisations des performances, l'équipe a adopté une culture axée sur les performances lors de l'implémentation de nouvelles fonctionnalités. Truebil a pu améliorer considérablement l'expérience utilisateur en donnant la priorité aux métriques First Contentful Paint (Premier affichage de contenu) et Time to Interactive (TTI) (Temps d'interactivité), et en optimisant les premiers chargements, les visites répétées et la navigation fluide. L'équipe a obtenu ces résultats en définissant des budgets de performances et en utilisant diverses techniques pour les atteindre.

Définir des budgets de performances

L'équipe Truebil a choisi de concevoir son expérience en tant qu'application monopage avec un rendu côté serveur pour le premier chargement et un rendu côté client pour les chargements suivants, dans un souci de performances. Il peut être difficile de maintenir les performances des applications Web avec le rendu côté client. Truebil a donc défini des budgets de performances très stricts pour s'assurer qu'elles ne compromettent pas la vitesse, en particulier lorsqu'elles ajoutent des fonctionnalités.

L'équipe a défini des budgets stricts basés sur des jalons pour le TTI, dans le but de le maintenir en dessous de cinq secondes. Pour atteindre cet objectif, ils se sont assurés manuellement qu'aucune compilation ne dépassait une taille de bundle JavaScript de 250 ko, ont vérifié en permanence les tailles d'image et ont suivi en continu le score de performances Lighthouse de l'application.

Optimiser les bundles JavaScript

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

Pour charger de manière différée les ressources non critiques, ils ont utilisé leurs composants de chargement différé au niveau du framework pour charger les fragments en dessous de la ligne de flottaison.

Pour supprimer les goulots d'étranglement des bundles JavaScript, l'équipe a réduit les charges utiles via le fractionnement du code. Ils ont utilisé le fractionnement basé sur les composants et les routes pour réduire la taille du bundle principal et améliorer leur temps de chargement de 44 %, le TTI passant de 6 secondes à environ 5 secondes et le First Meaningful Paint (FMP) de 4,1 secondes à 3,6 secondes.

Capture d'écran des outils pour les développeurs Chrome montrant la taille de compilation de Truebil Lite avant et après le fractionnement du code.
Impact de la réduction de la taille des fragments.

CSS critiques intégrés

Pour améliorer encore plus FMP, l'équipe a utilisé Lighthouse pour identifier des opportunités d'optimisation des performances et valider leur impact. Lighthouse a indiqué que la réduction du CSS bloquant le rendu aurait le plus d'impact. Truebil a donc intégré tout le CSS critique et différé le CSS non critique. Cette technique a réduit le temps de chargement moyen de 2 secondes environ.

Capture d'écran des outils pour les développeurs Chrome montrant le délai avant le premier rendu significatif de Truebil Lite avant et après l'intégration du CSS.
Impact de l'intégration du CSS critique.

Éviter les allers-retours multiples et coûteux vers n'importe quelle origine

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

Capture d&#39;écran de Chrome DevTools montrant l&#39;effet de rel=preconnect.
Impact de l'ajout de <link rel=preconnect>.

Précharger dynamiquement la page suivante

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

Capture d&#39;écran de l&#39;application Truebil Lit et de Chrome DevTools montrant que les requêtes réseau ne sont pas nécessaires pour les navigations courantes, car les éléments ont déjà été préchargés.
Impact du préchargement des composants sur les parcours utilisateur courants.

Optimiser les images et les polices

Les images sont un élément essentiel de l'expérience produit et de la crédibilité de Truebil. Chaque fiche produit comprend jusqu'à 40 images. Pour s'assurer que les images ne bloquent pas le chargement de la page, l'équipe a choisi de fournir toutes ses ressources à partir d'un CDN et d'utiliser imagemagick pour optimiser les images. Ils ont également compressé toutes les ressources compressables, y compris les images, JavaScript et CSS, pour réduire encore le temps de chargement.

Pour éviter un clignotement de texte invisible tout en réduisant le temps de chargement au maximum, Truebil a configuré son CSS pour utiliser 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 souhaité réduire davantage la taille du bundle du fournisseur et le temps d'exécution JavaScript. Elle a donc remplacé son application React par 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.

Intégrer la fiabilité

La grande majorité des utilisateurs de Truebil, qui se concentre sur le marché indien, accèdent à leur produit sur des réseaux inégaux qui peuvent parfois atteindre des bandes passantes aussi faibles que la 2G. Il était donc essentiel de créer une expérience résiliente, non seulement pour améliorer les performances en cas de conditions réseau limitées, mais aussi pour proposer un produit sur lequel les utilisateurs pouvaient compter, 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 de Truebil varient beaucoup. Pour s'assurer que tous ses contenus sont à la fois à jour et fiables, l'équipe Truebil a implémenté le mise en cache de l'API en combinant des stratégies de mise en cache en priorité sur le réseau, en priorité sur le cache et en priorité sur la vitesse.

Pour les pages statiques, comme la page des abonnements, Truebil utilise une stratégie de cache prioritaire pour accéder d'abord au cache de son API d'abonnement, puis 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 de priorité au réseau afin que le navigateur recherche 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 filtre, de recherche et de ville, Truebil utilise une stratégie de priorité au plus rapide pour choisir entre le réseau et le cache en fonction de l'option la plus rapide. Pour s'assurer que le contenu est à jour, le cache est mis à jour chaque fois que la réponse du réseau diffère de ce qui est stocké dans le 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 (des voitures peuvent être ajoutées ou achetées à tout moment), l'équipe voulait s'assurer que ses utilisateurs avaient quelque contenu à consulter, même s'ils passaient par des réseaux instables ou étaient complètement hors connexion.

Grâce aux service workers, l'équipe a pu mettre en cache à la fois les données statiques et les données dynamiques avec lesquelles un utilisateur a déjà interagi afin qu'il puisse les consulter hors connexion. Pour s'assurer que les utilisateurs sachent que le contenu peut changer lorsqu'ils se reconnectent, l'équipe a modifié l'UI en mode grisé pour indiquer le mode hors connexion. La navigation sur les pages produit est une partie essentielle du parcours utilisateur de Truebil. Les utilisateurs qui ont accédé à la PWA au moins une fois peuvent parcourir les fiches et les pages produit qu'ils ont déjà consultées, mais ne verront aucune mise à jour de la fiche ni du produit.

Capture d&#39;écran de l&#39;application Truebil Lite en mode hors connexion.
Truebil Lite en mode hors connexion.

Améliorer 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 a dû compléter son application Web à chargement rapide avec un produit qui propose des recommandations très pertinentes pour augmenter les conversions. L'équipe utilise un système de recommandation basé sur un filtrage sophistiqué pour les utilisateurs existants, mais celui-ci ne fonctionne pas pour les utilisateurs qui se connectent pour la première fois.

Pour éviter de donner un démarrage à froid à leurs nouveaux utilisateurs, l'équipe a intégré un système de recommandation à l'aide de ses efforts de marketing digital. Ils ajoutent des informations détaillées sur les produits (modèle de voiture, prix et type de carrosserie, par exemple) dans l'URL de destination d'une annonce à l'aide d'un paramètre UTM, qui est lu par leur système de recommandation et se reflète dans les produits affichés. Si le système ne lit pas de tels détails dans l'URL, il utilise les voitures populaires, qui sont une combinaison de modèles populaires, de budgets populaires et de voitures populaires au cours des dernières semaines ou jours.

Une application Web à installer

Après avoir créé une application Web rapide et complète offrant une expérience utilisateur attrayante, Truebil souhaitait s'assurer que ses utilisateurs reviendraient. Il a compris que rendre l'application installable faciliterait les visites répétées.

L'équipe a implémenté la fonctionnalité Ajouter à l'écran d'accueil pour transformer son produit en 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. Comme elle avait déjà implémenté un mode hors connexion, l'équipe a pu ajouter facilement la nouvelle fonctionnalité.

Pour s'assurer que ses utilisateurs ne recevaient pas de spam et pour augmenter la probabilité qu'ils installent l'application, l'équipe a récemment modifié sa stratégie de promotion de l'installation de PWA afin que les invites d'installation s'affichent lorsqu'elles sont réellement utiles à différents types d'utilisateurs. Truebil a opté pour une stratégie en trois volets:

  • Afficher des requêtes lorsque l'utilisateur a terminé une action ou est inactif.
  • Affichez des invites contextuelles aux utilisateurs matures.
  • 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 termine une tâche ou se trouve sur des pages à fort trafic, mais qu'il est inactif (c'est-à-dire qu'il n'effectue aucune action, comme faire défiler la page ou remplir un formulaire). Cette approche leur a permis d'éviter d'interrompre l'activité de l'utilisateur.

Captures d&#39;écran de la bannière d&#39;installation de Truebil Lite.

Requêtes contextuelles pour les utilisateurs matures

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:

Capture d&#39;écran des invites d&#39;installation contextuelles de Truebil Lite pour les utilisateurs adultes.

Bannière personnalisée pour les requêtes basées sur le temps

Enfin, l'équipe a intégré une bannière non intrusive avec une conception semblable à une notification, qui se déclenche à des événements spécifiques, comme l'ouverture d'une page de fiche ou après un certain temps passé dans l'application:

Capture d&#39;écran de la bannière d&#39;invite d&#39;installation basée sur le temps de Truebil Lite

Grâce à ces améliorations, les taux de conversion et d'engagement de Truebil ont considérablement augmenté, avec des sessions utilisateur 26% plus longues et 61% de conversions en plus, ce qui est important pour son activité compte tenu de la valeur élevée de chaque transaction.

Pour une start-up aux ressources limitées, choisir la bonne plate-forme peut être essentiel à la réussite de l'entreprise. En passant à une PWA axée sur la rapidité, la résilience et l'engagement, nous avons pu augmenter notre ratio revenus/dépenses marketing de 80% grâce à une augmentation des conversions et à la couverture fluide du Web.

Rakesh Raman, cofondateur et responsable produit et data science de Truebil

44%

Amélioration du temps de chargement

26%

Sessions utilisateur plus longues

61 %

d'augmentation des conversions

80 %

Augmenter le ratio revenus/dépenses marketing