In che modo Truebil ha trasformato il Web nel suo canale di crescita

La storia di una startup come la creazione di un'esperienza web all'avanguardia.

Informazioni

Fondato nel 2015, Truebil è un marketplace online indiano che vende auto usate al 100%. Con oltre 1, 4 milioni di utenti attivi mensili, è una soluzione completa che include trasferimento di proprietà, assicurazioni, prestiti e garanzie di servizio. I potenziali clienti possono visualizzare le singole pagine dei prodotti con immagini e report dettagliati sull'ispezione e ricevere valutazioni dei veicoli con le funzionalità "Confronta" e "Truescore" del sito. Truebil differenzia il proprio prodotto con funzionalità avanzate, tra cui consigli personalizzati basati sul machine learning, una funzionalità di aggiunta ai preferiti, una funzionalità di condivisione di un'auto e altro ancora.

Sfida

Truebil è una startup snella con transazioni a bassa frequenza e di alto valore, per cui era fondamentale scegliere la piattaforma giusta a cui dare la priorità e su cui investire.

Truebil ha identificato il mobile come piattaforma di destinazione e ha scelto il web per la sua prima app, Truebil Lite, grazie alla facilità di scoperta e al basso attrito del web. La tecnologia web offre costi di sviluppo inferiori, utilizzo di dati e memoria inferiore e costi di acquisizione dei clienti significativamente inferiori rispetto alla creazione di un'app per Android/iOS. Inoltre, grazie alla creazione di un'app web progressiva (PWA), Truebil può usufruire di tutti i vantaggi del web e di quelli di iOS/Android.

Soluzione

Un team interno ha impiegato quattro mesi per sviluppare Truebil Lite utilizzando React, Django e Preact (per la migrazione in produzione). Hanno stabilito chiari principi guida per l'app web basati sugli obiettivi degli utenti. L'esperienza doveva essere:

• Veloce al primo caricamento e nelle navigazioni successive,
• Affidabile, indipendentemente dai vincoli della rete o del dispositivo dell'utente.
• Coinvolgente, in particolare per gli schermi dei dispositivi mobili di piccole dimensioni, quindi gli utenti vogliono tornare.

Ottimizza per velocizzare il primo caricamento e le navigazioni

Utilizzando Lighthouse per guidare l'ottimizzazione del rendimento, il team ha adottato una cultura incentrata sul rendimento e al contempo implementando nuove funzionalità. Truebil è stato in grado di migliorare notevolmente l'esperienza utente dando la priorità alle metriche First Contentful Paint e Time to Interactive (TTI), ottimizzando le attività in funzione dei primi caricamenti veloci, delle visite ripetute e della navigazione fluida. Il team ha ottenuto questi risultati definendo i budget per le prestazioni e utilizzando una serie di tecniche per ottenerli.

Impostare i budget delle prestazioni

Con un approccio incentrato sulle prestazioni, il team di Truebil ha scelto di sviluppare la propria esperienza come app di singola pagina con rendering lato server per il primo caricamento e rendering lato client per i caricamenti successivi. Mantenere le prestazioni delle app web con rendering lato client può essere difficile, quindi Truebil imposta budget per le prestazioni molto rigorosi per non compromettere la velocità, soprattutto quando aggiunge più funzionalità.

Per il TTI, il team ha stabilito budget rigorosi in base a un obiettivo, con l'obiettivo di mantenerlo al di sotto dei cinque secondi. Per raggiungere questo obiettivo, si sono assicurati manualmente che nessuna build superasse le dimensioni del bundle JavaScript di 250 kB, hanno tenuto un controllo costante delle dimensioni delle immagini e hanno monitorato continuamente il punteggio delle prestazioni di Lighthouse dell'app.

Ottimizza i bundle JavaScript

Il team ha iniziato dalle basi utilizzando il pattern PRPL per prememorizzare nella cache e ottimizzare i payload JavaScript e passando a HTTP/2 per pubblicare bundle JavaScript critici.

Per eseguire il caricamento lento delle risorse non critiche, hanno utilizzato i componenti di caricamento lento a livello di framework per caricare i frammenti below the fold.

Per rimuovere eventuali colli di bottiglia dei bundle JavaScript, il team ha ridotto i payload tramite la suddivisione del codice. L'azienda ha utilizzato la suddivisione basata su componenti e route per ridurre le dimensioni del bundle principale e migliorare il tempo di caricamento del 44%, con un TTI che è sceso da 6 secondi a circa 5 secondi e First Meaningful Paint (FMP) da 4,1 a 3,6 secondi.

CSS critico incorporato

Per migliorare ulteriormente FMP, il team ha utilizzato Lighthouse per trovare opportunità e convalidare l'impatto delle ottimizzazioni delle prestazioni. Lighthouse ha indicato che la riduzione del codice CSS per il blocco della visualizzazione avrebbe avuto l'effetto maggiore, quindi Truebil ha integrato tutti i CSS fondamentali e CSS non fondamentali differiti. Questa tecnica ha ridotto il valore FMP di circa 2 secondi.

Evita più costosi viaggi di andata e ritorno verso qualsiasi luogo di partenza

Per ridurre l'overhead associato a DNS e TLS, Truebil ha utilizzato <link rel="preconnect"> e <link rel="dns-prefetch">. Questo approccio fa sì che il browser completi l'handshake TLS il prima possibile al caricamento della pagina e pre-risolvi i nomi di dominio multiorigine, consentendo un'esperienza utente rapida e sicura.

Precarica dinamicamente la pagina successiva

Analizzando i dati, il team ha identificato i percorsi degli utenti più comuni che potrebbe ottimizzare. In questi casi, l'app scarica in modo dinamico la risorsa della pagina successiva utilizzando <link rel=prefetch> per garantire una navigazione senza problemi agli utenti. Sebbene il team identifichi manualmente i link da precaricare, utilizza il webpack per raggruppare il codice JS di questi link.

Ottimizza immagini e caratteri

Le immagini sono una parte fondamentale dell'esperienza e della credibilità del prodotto di Truebil, in quanto ogni scheda di prodotto include fino a 40 immagini. Per assicurarsi che le immagini non blocchino il caricamento delle pagine, il team ha scelto di pubblicare tutte le risorse da una CDN e utilizzare imagemagick per l'ottimizzazione delle immagini. Ha inoltre compresso tutte le risorse comprimibili, tra cui immagini, JavaScript e CSS, per ridurre ulteriormente i tempi di caricamento.

Per evitare un lampo di testo invisibile riducendo al minimo il tempo di caricamento, Truebil ha impostato il proprio CSS in modo che utilizzasse i caratteri di sistema come riserva fino al caricamento dei caratteri esterni.

Ulteriori ottimizzazioni

Quando l'app era pronta, il team voleva ridurre ulteriormente le dimensioni del bundle del fornitore e i tempi di esecuzione di JavaScript, quindi ha cambiato l'app React in Preact in produzione. Scopri di più nella raccolta React. Questo approccio li ha aiutati a ridurre le dimensioni del bundle del fornitore da 82,3 KB a 51,2 KB.

Integra l'affidabilità

Con un'attenzione particolare al mercato indiano, la stragrande maggioranza degli utenti di Truebil accede al prodotto su reti non corrette che a volte rientrano in larghezze di banda inferiori alla rete 2G. Pertanto, creare un'esperienza resiliente è stato fondamentale non solo per migliorare le prestazioni in condizioni di rete limitate, ma anche per offrire un prodotto su cui gli utenti potevano fare affidamento, un prodotto che funziona sempre.

Una strategia ibrida di memorizzazione nella cache per un caricamento affidabile

L'interattività e la velocità di cambiamento per i contenuti di Truebil variano molto. Per garantire che tutti i suoi contenuti siano aggiornati e affidabili, il team di Truebil ha implementato la cache delle API utilizzando una combinazione di strategie network-first, cache-first e più veloci.

Per le pagine statiche, ad esempio la pagina degli abbonamenti, Truebil utilizza una strategia basata sulla cache per andare prima alla cache dell'API Subscription, quindi tornare alla rete.

Per le pagine con contenuti dinamici che cambiano raramente, come le schede di prodotto o le pagine dei dettagli, Truebil utilizza una strategia network-first per consentire al browser di verificare la presenza di contenuti nella rete prima di tornare alla cache dell'API se la rete non è disponibile.

Per le pagine dinamiche che cambiano spesso, come le pagine Home, Filtro, Ricerca e Città, Truebil utilizza la strategia più rapida per scegliere tra rete e cache in base all'evento che si verifica per primo. Per garantire che i contenuti siano aggiornati, la cache viene aggiornata ogni volta che la risposta di rete è diversa da quanto contenuto nella cache.

Service worker per un'esperienza offline completa

Anche se gran parte dei contenuti di Truebil è altamente dinamica (è possibile aggiungere o acquistare auto in qualsiasi momento), il team voleva assicurarsi che gli utenti avessero alcuni contenuti con cui interagire, anche se navigavano su reti non corrette o erano completamente offline.

Utilizzando i service worker, il team è riuscito a memorizzare nella cache sia i dati statici sia i dati dinamici con cui un utente ha già interagito in modo che l'utente possa visualizzarli offline. Per assicurarsi che gli utenti fossero consapevoli che i contenuti potrebbero cambiare quando torneranno online, il team ha modificato l'interfaccia utente in scala di grigi per indicare la modalità offline. La navigazione delle pagine dei prodotti è una parte fondamentale del percorso dell'utente di Truebil. Gli utenti che hanno visitato la PWA almeno una volta possono sfogliare le schede e le pagine dei prodotti che hanno già visitato, ma non possono vedere gli aggiornamenti della scheda o del prodotto.

Aumenta il coinvolgimento per invogliare gli utenti a tornare

Una prima esperienza coinvolgente

Poiché la maggior parte dei suoi utenti proviene da canali a pagamento, Truebil doveva integrare la sua app web a caricamento rapido con un prodotto che mostrasse consigli altamente pertinenti per aumentare le conversioni. Il team utilizza un sistema di suggerimenti basato su filtri sofisticati per gli utenti esistenti, ma il sistema non funziona per gli utenti che accedono per la prima volta.

Per evitare di avviare a freddo i nuovi utenti, il team ha integrato un sistema di consigli sulla base delle proprie attività di marketing digitale. Aggiunge dettagli sui prodotti, come modello dell'auto, prezzo e tipo di carrozzeria, nell'URL di destinazione di un annuncio tramite un parametro UTM, che viene letto dal sistema di consigli del cliente e riportato nei prodotti mostrati. Se il sistema non legge questi dettagli nell'URL, si riferisce alle auto popolari, una combinazione di modelli popolari, budget e auto popolari nelle ultime settimane o giorni.

Un'app web installabile

Avendo creato un'app web veloce e completa con un'esperienza utente accattivante, Truebil voleva assicurarsi che i suoi utenti tornassero a visitare il sito. Si è reso conto che rendere l'app installabile avrebbe reso le visite ripetute molto più semplici.

Il team ha implementato la funzionalità Aggiungi alla schermata Home per rendere il prodotto un'app web progressiva (PWA) completa. Questo approccio ha consentito agli utenti di aggiungere Truebil Lite alla schermata Home e di avviarlo in modalità a schermo intero. Inoltre, dal momento che il team aveva già implementato una modalità offline, il team è stato in grado di aggiungere la nuova funzionalità con facilità.

Per assicurarsi che gli utenti non ricevano spam e per aumentare le probabilità che gli utenti installino l'app, di recente il team ha aggiornato la strategia per promuovere l'installazione di PWA, in modo che le richieste di installazione vengano visualizzate quando erano effettivamente utili per diversi tipi di utenti. Truebil ha adottato una strategia in tre parti:

• Mostra le richieste quando l'utente ha completato un'azione o è inattivo.
• Mostra richieste contestuali agli utenti adulti.
• Mostra un banner quando l'utente ha trascorso un determinato periodo di tempo sul sito.

Banner predefiniti al completamento del processo e sulle pagine a traffico elevato

Il team ha deciso di mostrare un banner di installazione quando un utente completa un'attività o se si trova su pagine con traffico elevato ma inattivo (ovvero non esegue un'azione, come scorrere o compilare un modulo). Questo approccio ha permesso di evitare di interrompere l'attività dell'utente.

Prompt contestuali per utenti adulti

Per gli utenti che avevano interagito con l'app per un certo periodo, il team ha utilizzato messaggi personalizzati altamente contestuali per mostrare il valore dell'installazione dell'app sulla schermata Home:

Un banner personalizzato per i prompt basati sul tempo

Infine, il team ha creato un banner non invasivo con un design simile a una notifica che si attiva in occasione di eventi specifici, come l'apertura di una pagina della scheda o dopo che l'utente ha trascorso un determinato periodo di tempo nell'app:

Grazie a questi miglioramenti, i tassi di conversione e di coinvolgimento di Truebil sono cresciuti in modo significativo con il 26% di sessioni utente più lunghe e il 61% di conversioni in più, un aspetto significativo per la sua attività dato l'elevato valore di transazione di ogni conversione.

Per una startup con risorse limitate, scegliere la piattaforma giusta può essere fondamentale per il successo dell'attività. Il passaggio a una PWA incentrata su velocità, resilienza e coinvolgimento ci ha consentito di aumentare la spesa per le entrate per il marketing dell'80% grazie all'aumento delle conversioni e alla copertura ottimale del web.

Rakesh Raman, Co-Fondatore e Chief of Product & Data Science presso Truebil