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

La storia di una startup che ha creato un'esperienza web di eccellenza.

Harleen Batra
Harleen Batra

Informazioni

Fondata nel 2015, Truebil è un marketplace online indiano che vende auto usate certificate al 100%. Con oltre 1, 4 milioni di utenti attivi mensili, è una soluzione completa che include trasferimento di proprietà, assicurazione, prestiti e garanzie di servizio. I potenziali clienti possono vedere le singole pagine dei prodotti con immagini e report di ispezione dettagliati e ottenere 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à Aggiungi ai preferiti, una funzionalità di condivisione dell'auto e altro ancora.

Sfida

Truebil è una startup snella con transazioni ad alta frequenza e di alto valore, quindi era fondamentale scegliere la piattaforma giusta da dare la priorità e in cui investire.

Truebil ha identificato il mobile come piattaforma di destinazione e ha scelto il web per la sua prima app, Truebil Lite, per la facilità di rilevamento e la bassa complessità del web. La tecnologia web offre costi di sviluppo inferiori, un utilizzo inferiore di dati e memoria e costi di acquisizione dei clienti notevolmente inferiori rispetto alla creazione di un'app per Android/iOS. Inoltre, creando un'app web progressiva (PWA), Truebil poteva 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 principi guida chiari per l'app web in base agli 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 e
  • Coinvolgente, in particolare per gli schermi dei dispositivi mobili di piccole dimensioni, in modo che gli utenti vogliano tornare a visitarla.

Ottimizza per un primo caricamento e una navigazione rapidi

Utilizzando Lighthouse per guidare le ottimizzazioni del rendimento, il team ha adottato una cultura incentrata sul rendimento durante l'implementazione di nuove funzionalità. Truebil è riuscita a migliorare in modo significativo l'esperienza utente dando la priorità alle metriche First Contentful Paint e Time to Interactive (TTI) e ottimizzando il sito per i primi caricamenti rapidi, le visite ripetute e la navigazione fluida. Il team ha ottenuto questi risultati impostando budget di rendimento e utilizzando una serie di tecniche per raggiungerli.

Impostare budget di rendimento

Con un approccio incentrato sul rendimento, il team di Truebil ha scelto di progettare la propria esperienza come app a pagina singola con rendering lato server per il primo caricamento e rendering lato client per i caricamenti successivi. Mantenere le app web con il rendering lato client efficienti può essere difficile, quindi Truebil ha impostato budget di prestazioni molto rigidi per garantire che la velocità non venga compromessa, soprattutto con l'aggiunta di altre funzionalità.

Il team ha impostato budget rigorosi basati su traguardi per il TTI con l'obiettivo di mantenerlo al di sotto di cinque secondi. Per raggiungere questo obiettivo, il team ha verificato manualmente che nessuna build superasse le dimensioni del bundle JavaScript di 250 KB, ha monitorato costantemente le dimensioni delle immagini e ha monitorato continuamente il punteggio di rendimento di Lighthouse dell'app.

Ottimizza i bundle JavaScript

Il team ha iniziato con le nozioni di base utilizzando il pattern PRPL per eseguire la precache e ottimizzare i payload JavaScript e passando a HTTP/2 per pubblicare i bundle JavaScript fondamentali.

Per il caricamento differito delle risorse non critiche, ha utilizzato i componenti di caricamento differito a livello di framework per caricare i frammenti sotto la piega.

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

Screenshot di Chrome DevTools che mostrano le dimensioni della build di Truebil Lite prima e dopo la suddivisione del codice.
Impatto della riduzione delle dimensioni dei chunk.

CSS critico incorporato

Per migliorare ulteriormente il programma FMP, il team ha utilizzato Lighthouse per trovare opportunità e convalidare l'impatto delle ottimizzazioni del rendimento. Lighthouse ha indicato che la riduzione del CSS che blocca il rendering avrebbe avuto l'effetto maggiore, quindi Truebil ha incorporato tutto il CSS critico e posticipato il CSS non critico. Questa tecnica ha ridotto il tempo di caricamento medio di circa 2 secondi.

Screenshot di Chrome DevTools che mostrano il tempo di Truebil Lite fino alla prima visualizzazione significativa prima e dopo l'inserimento in linea del CSS.
Impatto dell'inserimento in linea del CSS critico.

Evitare più viaggi di andata e ritorno costosi verso qualsiasi origine

Per ridurre il sovraccarico di DNS e TLS, Truebil ha utilizzato <link rel="preconnect"> e <link rel="dns-prefetch">. Questo approccio consente al browser di completare l'handshake TLS il prima possibile al caricamento della pagina e di pre-risolvere i nomi di dominio cross-origin, garantendo un'esperienza utente sicura e rapida.

Screenshot di Chrome DevTools che mostrano l&#39;effetto di rel=preconnect.
Impatto dell'aggiunta di <link rel=preconnect>.

Effettuare il prelievo della pagina successiva in modo dinamico

Analizzando i dati, il team ha identificato i percorsi degli utenti più comuni per i quali poteva ottimizzare l'app. In questi casi, l'app scarica dinamicamente la risorsa della pagina successiva utilizzando <link rel=prefetch> per garantire una navigazione fluida per gli utenti. Sebbene il team identifichi manualmente i link da precaricare, utilizza webpack per raggruppare il codice JS per questi link.

Screenshot dell&#39;app Truebil Lit e di Chrome DevTools che mostrano che le richieste di rete non sono necessarie per le navigazioni comuni perché gli asset sono già stati prerecuperati.
L'effetto del pre-caricamento degli asset per i percorsi utente comuni.

Ottimizzare immagini e caratteri

Le immagini sono un elemento fondamentale dell'esperienza e della credibilità del prodotto di Truebil, con ogni scheda di prodotto che include fino a 40 immagini. Per assicurarsi che le immagini non blocchino il caricamento della pagina, il team ha scelto di pubblicare tutte le risorse da una CDN e di utilizzare imagemagick per l'ottimizzazione delle immagini. Inoltre, ha utilizzato la compressione GZIP per tutte le risorse comprimibili, tra cui immagini, JavaScript e CSS, per ridurre ulteriormente il tempo di caricamento.

Per evitare un lampo di testo invisibile mantenendo il tempo di caricamento il più basso possibile, Truebil ha configurato il CSS in modo da utilizzare i caratteri di sistema come alternativa fino al caricamento dei caratteri esterni.

Ulteriori ottimizzazioni

Quando l'app è stata pronta, il team voleva ridurre ulteriormente le dimensioni del bundle del fornitore e il tempo di esecuzione di JavaScript, quindi ha eseguito il passaggio dall'app React a Preact in produzione. Scopri di più nella raccolta React. Questo approccio ha consentito di ridurre le dimensioni del bundle del fornitore da 82,3 KB a 51,2 KB.

Integrare l'affidabilità

Con un focus sul mercato indiano, la maggior parte degli utenti di Truebil accede al prodotto su reti discontinue che a volte raggiungono velocità di trasmissione inferiori al 2G. Pertanto, creare un'esperienza resiliente era fondamentale non solo per migliorare le prestazioni in condizioni di rete limitate, ma anche per offrire un prodotto su cui gli utenti potessero fare affidamento, che funzionasse sempre.

Una strategia di memorizzazione nella cache ibrida per un caricamento affidabile

L'interattività e il tasso di variazione dei contenuti di Truebil variano molto. Per garantire che tutti i suoi contenuti siano aggiornati e affidabili, il team di Truebil ha implementato la cache dell'API utilizzando una combinazione di strategie network-first, cache-first e fastest-first.

Per le pagine statiche, come la pagina degli abbonamenti, Truebil utilizza una strategia cache-first per accedere prima alla cache dell'API di abbonamento, facendo poi ricorso 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 di priorità alla rete in modo che il browser controlli prima la rete per i contenuti prima di passare alla cache dell'API se la rete non è disponibile.

Per le pagine dinamiche che cambiano spesso, come la home page, le pagine di filtro, di ricerca e delle città, Truebil utilizza una strategia di priorità alla velocità per scegliere tra rete o cache in base a ciò che si verifica per primo. Per garantire l'aggiornamento dei contenuti, la cache viene aggiornata ogni volta che la risposta della rete è diversa da quella memorizzata nella cache.

Service worker per un'esperienza offline completa

Anche se gran parte dei contenuti di Truebil è altamente dinamica (le auto possono essere aggiunte o acquistate in qualsiasi momento), il team voleva assicurarsi che i propri utenti avessero alcuni contenuti con cui interagire, anche se utilizzavano reti con segnale debole o erano completamente offline.

Utilizzando i service worker, il team è stato in grado di memorizzare nella cache sia i dati statici sia quelli dinamici con cui un utente ha già interagito, in modo che l'utente possa visualizzarli offline. Per assicurarsi che gli utenti sappiano 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 nelle 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 visitato in precedenza, ma non potranno vedere gli aggiornamenti della scheda o del prodotto.

Uno screenshot dell&#39;app Truebil Lite in modalità offline.
Truebil Lite in modalità offline.

Migliorare il coinvolgimento per far tornare gli utenti

Una prima esperienza coinvolgente

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

Per evitare di offrire un'esperienza di primo utilizzo fredda, il team ha integrato un sistema di consigli utilizzando le proprie attività di marketing digitale. Aggiungono dettagli del prodotto come modello di auto, prezzo e tipo di carrozzeria all'URL di destinazione di un annuncio tramite un parametro UTM, che viene letto dal sistema di consigli e riportato nei prodotti visualizzati. Se il sistema non legge questi dettagli nell'URL, utilizza le auto più apprezzate, ovvero una combinazione di modelli, budget e auto più apprezzati nelle ultime settimane o nei giorni precedenti.

Un'app web installabile

Dopo aver creato un'app web veloce e completa con un'esperienza utente coinvolgente, Truebil voleva assicurarsi che i suoi utenti continuassero a tornare. Hanno capito che rendere l'app installabile avrebbe semplificato notevolmente le visite ripetute.

Il team ha implementato la funzionalità Aggiungi alla schermata Home per rendere il proprio prodotto un'applicazione 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. Poiché aveva già implementato una modalità offline, il team è stato in grado di aggiungere facilmente la nuova funzionalità.

Per assicurarsi che i propri utenti non ricevessero spam e aumentare la probabilità che installassero l'app, il team ha recentemente aggiornato la propria strategia per la promozione dell'installazione di PWA in modo che le richieste di installazione vengano visualizzate quando sono effettivamente utili a diversi tipi di utenti. Truebil ha optato per una strategia in tre parti:

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

Banner predefiniti al completamento della procedura e nelle pagine con traffico elevato

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

Screenshot del banner di installazione di Truebil Lite.

Prompt contestuali per gli utenti adulti

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

Screenshot delle richieste di installazione contestuali di Truebil Lite per gli utenti maggiorenni.

Un banner personalizzato per i prompt basati sul tempo

Infine, il team ha integrato un banner non invadente con un design simile a una notifica che viene attivato in caso di eventi specifici, ad esempio l'apertura di una pagina della scheda o dopo che l'utente ha trascorso un determinato periodo di tempo nell'app:

Uno screenshot del banner di richiesta di installazione basata sul tempo di Truebil Lite.

Grazie a questi miglioramenti, i tassi di conversione e coinvolgimento di Truebil sono aumentati in modo significativo, con sessioni utente più lunghe del 26% e un aumento delle conversioni del 61% , un risultato significativo per l'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 il marketing in base alle entrate dell'80% grazie all'aumento delle conversioni e alla copertura senza problemi del web.

Rakesh Raman, Co-fondatore e Chief of Product & Data Science di Truebil

44%

Miglioramento del tempo di caricamento

26%

Sessioni utente più lunghe

61%

aumento delle conversioni

80%

Aumento della spesa di marketing rispetto alle entrate