Comment Truebil a choisi le Web pour se développer

Découvrez comment une start-up a créé une expérience Web de premier ordre.

À propos

Fondée en 2015, Truebil est une place de marché en ligne indienne 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 de véhicules grâce aux fonctionnalités "Comparer" et "Truescore" du site. Truebil différencie son produit grâce à des 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 et plus encore.

Défi

Truebil est une start-up lean qui propose des transactions à faible fréquence et à forte valeur. Il était donc essentiel de choisir la bonne plate-forme pour définir les priorités 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 permet de réduire les coûts de développement, l'utilisation des données et de la mémoire, ainsi que les coûts d'acquisition de clients de manière significative par rapport à la création d'une application Android/iOS. En créant une application Web progressive (PWA), Truebil a pu 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 de 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
• Engageant, en particulier pour les petits écrans mobiles, afin que les utilisateurs aient envie d'y revenir.

Optimiser le premier chargement et la navigation

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 accordant la priorité aux métriques First Contentful Paint et Time to Interactive (TTI), et en optimisant les chargements rapides lors de la première visite, les visites répétées et la navigation fluide. Pour atteindre ces résultats, l'équipe a défini des budgets de performances et utilisé différentes techniques.

Définir des budgets de performances

En privilégiant les performances, l'équipe Truebil a choisi de concevoir son expérience sous la forme d'une 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 rendu côté client. Truebil a donc défini des budgets de performances très stricts pour s'assurer de ne pas compromettre la vitesse, en particulier à mesure qu'il ajoute 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épasserait une taille de bundle JavaScript de 250 Ko, ont vérifié en permanence la taille des images 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émettre en cache et optimiser les charges utiles JavaScript, et en passant à HTTP/2 pour diffuser les 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 situés sous la ligne de flottaison.

Pour supprimer les goulots d'étranglement des groupes JavaScript, l'équipe a réduit les charges utiles grâce au fractionnement du code. Ils ont utilisé le chunking 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 temps avant interactivité (TTI) est ainsi passé de 6 à environ 5 secondes, et le temps avant première peinture significative (FMP) de 4,1 à 3,6 secondes.

Intégrer les fichiers CSS critiques

Pour améliorer encore le FMP, l'équipe a utilisé Lighthouse pour identifier les 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'effet. Truebil a donc intégré tout le CSS essentiel et différé le CSS non essentiel. Cette technique a réduit le FMP d'environ deux secondes.

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

Pour réduire la surcharge liée au DNS et à TLS, Truebil a utilisé <link rel="preconnect"> et <link rel="dns-prefetch">. Cette approche permet au navigateur d'effectuer le handshake TLS dès que possible lors du chargement de la page et de pré-résoudre les noms de domaine d'origine croisée, ce qui permet d'offrir une expérience utilisateur sécurisée et rapide.

Préchargement dynamique de la page suivante

En analysant leurs 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 garantir une navigation fluide aux utilisateurs. L'équipe identifie manuellement les liens à précharger, mais utilise webpack pour regrouper le code JS de ces liens.

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 incluant 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 optimiser les images. Ils ont également compressé toutes les ressources compressibles, y compris les images, JavaScript et CSS, pour réduire davantage le temps de chargement.

Pour éviter un flash de texte invisible tout en maintenant un temps de chargement aussi bas que possible, Truebil a configuré son CSS pour utiliser des polices système comme solution de repli jusqu'à ce que les polices externes soient chargées.

Autres optimisations

Une fois l'application prête, l'équipe a souhaité réduire davantage la taille du bundle du fournisseur et le temps d'exécution de JavaScript. Elle a donc remplacé son application React par Preact en production. (Pour en savoir plus, consultez la collection React.) Cette approche leur a permis de réduire la taille du bundle de fournisseurs de 82,3 Ko à 51,2 Ko.

Intégrer la fiabilité

Truebil se concentre sur le marché indien, où la grande majorité de ses utilisateurs accèdent à son produit sur des réseaux instables qui tombent parfois à des bandes passantes aussi basses que la 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 proposer un produit sur lequel les utilisateurs pouvaient compter, un produit qui fonctionne en permanence.

Une stratégie de mise en cache hybride pour un chargement fiable

L'interactivité et le taux de changement des contenus de Truebil varient beaucoup. Pour s'assurer que l'ensemble de son contenu est à la fois récent et fiable, l'équipe Truebil a implémenté la mise en cache des API en combinant les stratégies "network-first", "cache-first" et "fastest-first".

Pour les pages statiques, comme la page des abonnements, Truebil utilise une stratégie de cache en premier 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 pages de détails ou de fiches produit, Truebil utilise une stratégie "network-first" (priorité au réseau). Le navigateur vérifie d'abord le réseau pour le contenu avant de revenir au cache de l'API si le réseau n'est pas disponible.

Pour les pages dynamiques qui changent souvent, comme les pages d'accueil, de filtres, de recherche et de villes, Truebil utilise une stratégie "le plus rapide en premier" pour choisir entre le réseau et le cache en fonction de celui qui arrive en premier. Pour que le contenu soit à jour, le cache est actualisé chaque fois que la réponse du réseau diffère de ce qui se trouve 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 souhaitait s'assurer que ses utilisateurs disposaient d'un certain contenu avec lequel interagir, même s'ils utilisaient des réseaux instables ou étaient complètement hors connexion.

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

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

Une première expérience attrayante

La plupart de ses utilisateurs provenant de canaux payants, Truebil avait besoin de compléter son application Web à chargement rapide par 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 ce système ne fonctionne pas pour les utilisateurs qui se connectent pour la première fois.

Pour éviter un démarrage à froid à leurs nouveaux utilisateurs, l'équipe a intégré un système de recommandation à ses efforts de marketing digital. Ils ajoutent des informations sur les produits (modèle de voiture, prix et type de carrosserie, par exemple) à l'URL de destination d'une annonce à l'aide d'un paramètre UTM. Ces informations sont lues par leur système de recommandation et reflétées dans les produits présentés. Si le système ne trouve pas ces informations dans l'URL, il se rabat sur les voitures populaires, qui sont une combinaison de modèles populaires, de budgets populaires et de voitures qui ont été populaires au cours des dernières semaines ou des derniers jours.

Une application Web installable

Après avoir créé une application Web rapide et complète offrant une expérience utilisateur attrayante, Truebil souhaitait s'assurer que ses utilisateurs continueraient à revenir. Ils ont réalisé que rendre l'application installable permettrait de rendre les visites régulières beaucoup plus fluides.

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

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

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

Bannières par défaut à la fin d'un 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 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.

Requêtes contextuelles pour les utilisateurs adultes

Pour les utilisateurs qui avaient interagi avec l'application pendant 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 basées sur le temps

Enfin, l'équipe a intégré une bannière non intrusive avec une conception de type notification qui 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 des sessions utilisateur 26 % plus longues et 61 % de conversions en plus. C'est un résultat important pour l'entreprise, étant donné la valeur élevée des transactions de chaque conversion.

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

Rakesh Raman, cofondateur et responsable des produits et de la science des données chez Truebil