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 prima classe.

Informazioni

Fondato 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 il trasferimento di proprietà, l'assicurazione, i prestiti e le garanzie di servizio. I potenziali clienti possono visualizzare 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 suo prodotto con funzionalità avanzate, tra cui consigli personalizzati basati sul machine learning, una funzionalità di aggiunta ai preferiti, una funzionalità di condivisione dell'auto e altro ancora.

La sfida

Truebil è una startup snella con transazioni a bassa frequenza e di alto valore, quindi era fondamentale scegliere la piattaforma giusta su cui dare la priorità e 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 scoperta e la bassa frizione 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 una PWA, Truebil potrebbe ottenere tutti i vantaggi del web e di iOS/Android.

Soluzione

Un team interno ha impiegato quattro mesi per sviluppare Truebil Lite utilizzando React, Django e Preact (per la migrazione della 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 dalle limitazioni di rete o del dispositivo dell'utente e
• Coinvolgente, soprattutto per i piccoli schermi dei dispositivi mobili, in modo che gli utenti vogliano tornare a utilizzarlo.

Ottimizza per un caricamento e una navigazione iniziali 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 significativamente l'esperienza utente dando la priorità alle metriche First Contentful Paint e Time to Interactive (TTI) e ottimizzando i tempi di caricamento iniziali 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 una mentalità incentrata sul rendimento, il team di Truebil ha scelto di progettare la propria esperienza come app a una sola pagina con rendering lato server per il primo caricamento e rendering lato client per i caricamenti successivi. Mantenere efficienti le app web con rendering lato client può essere difficile, quindi Truebil ha stabilito budget per il rendimento molto rigidi per garantire di non compromettere la velocità, soprattutto quando aggiunge altre funzionalità.

Il team ha stabilito budget rigorosi basati sulle tappe fondamentali per il TTI con l'obiettivo di mantenerlo al di sotto dei 5 secondi. Per raggiungere questo obiettivo, si sono assicurati manualmente che nessuna build superasse le dimensioni di 250 KB del bundle JavaScript, hanno controllato costantemente le dimensioni delle immagini e hanno monitorato continuamente il punteggio di rendimento Lighthouse dell'app.

Ottimizzare 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 i bundle JavaScript critici.

Per caricare in modalità differita le risorse non critiche, hanno utilizzato i componenti di caricamento differito a livello di framework per caricare i frammenti visibili sotto la piega.

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

CSS critico in linea

Per migliorare ulteriormente l'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 fondamentale e rimandato il CSS non fondamentale. Questa tecnica ha ridotto l'FMP di circa 2 secondi.

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 fa sì che il browser completi l'handshake TLS il prima possibile durante il caricamento della pagina e risolva in anticipo i nomi di dominio cross-origin, consentendo un'esperienza utente sicura e rapida.

Recuperare in modo dinamico la pagina successiva

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

Ottimizzare immagini e caratteri

Le immagini sono una parte fondamentale dell'esperienza e della credibilità dei prodotti 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. Hanno anche compresso con Gzip tutte le risorse comprimibili, tra cui immagini, JavaScript e CSS, per ridurre ulteriormente il tempo di caricamento.

Per evitare un flash 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 fallback finché i caratteri esterni non vengono caricati.

Ulteriori ottimizzazioni

Quando l'app è stata pronta, il team ha voluto ridurre ulteriormente le dimensioni del bundle del fornitore e il tempo di esecuzione di JavaScript, quindi ha convertito l'app React in 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.

Affidabilità integrata

Con un focus sul mercato indiano, la stragrande maggioranza degli utenti di Truebil accede al proprio prodotto su reti instabili che a volte rientrano in larghezze di banda fino a 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, un prodotto 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 memorizzazione nella cache delle 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 degli abbonamenti e poi alla rete.

Per le pagine con contenuti dinamici che cambiano raramente, come le pagine di schede o dettagli dei prodotti, Truebil utilizza una strategia incentrata sulla rete, in modo che il browser controlli prima la rete per i contenuti prima di ricorrere 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 una strategia di priorità alla velocità per scegliere tra rete o cache in base a quale viene caricata per prima. Per garantire che i contenuti siano aggiornati, la cache viene aggiornata ogni volta che la risposta di rete è diversa da quella presente 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 gli utenti avessero alcuni contenuti con cui interagire, anche se si trovavano in reti instabili o completamente offline.

Utilizzando i service worker, il team è riuscito a memorizzare nella cache sia i dati statici sia quelli dinamici con cui un utente ha già interagito, in modo che possa visualizzarli offline. Per assicurarsi che gli utenti sappiano che i contenuti potrebbero cambiare quando tornano online, il team ha modificato la UI in scala di grigi per indicare la modalità offline. La navigazione nelle pagine di prodotto è una parte fondamentale del percorso dell'utente Truebil. Gli utenti che hanno visitato la PWA almeno una volta possono sfogliare le schede e le pagine di prodotto che hanno visitato in precedenza, ma non potranno visualizzare gli aggiornamenti alla scheda o al prodotto.

Migliorare il coinvolgimento per fidelizzare gli utenti

Un'esperienza iniziale coinvolgente

Poiché la maggior parte dei suoi utenti proviene da canali a pagamento, Truebil aveva bisogno di 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 consigli basato su un filtraggio sofisticato per gli utenti esistenti, ma il sistema non funziona per gli utenti che accedono per la prima volta.

Per evitare l'avvio a freddo per i nuovi utenti, il team ha integrato un sistema di consigli utilizzando le proprie attività di marketing digitale. Aggiungono dettagli del prodotto come modello, prezzo e tipo di carrozzeria dell'auto all'URL di destinazione di un annuncio tramite un parametro UTM, che viene letto dal sistema di raccomandazione e riportato nei prodotti visualizzati. Se il sistema non rileva questi dettagli nell'URL, utilizza le auto più richieste, ovvero una combinazione di modelli e budget popolari e auto che sono state popolari nelle ultime settimane o negli ultimi giorni.

Un'app web installabile

Dopo aver creato un'app web veloce e ricca di funzionalità con un'esperienza utente coinvolgente, Truebil voleva assicurarsi che gli utenti continuassero a tornare. Si sono resi conto che rendere installabile l'app avrebbe reso le visite ripetute molto più semplici.

Il team ha implementato la funzionalità Aggiungi alla schermata Home per trasformare il prodotto in un'applicazione web progressiva completa. Questo approccio ha consentito agli utenti di aggiungere Truebil Lite alla schermata Home e di avviarlo in modalità a schermo intero. Poiché avevano già implementato una modalità offline, il team è riuscito ad aggiungere facilmente la nuova funzionalità.

Per assicurarsi che i propri utenti non ricevano spam e per aumentare la probabilità che installino l'app, il team ha recentemente aggiornato la propria strategia per la promozione dell'installazione di PWA in modo che i prompt di installazione vengano visualizzati quando saranno 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.
• Mostra prompt contestuali agli utenti maturi.
• Mostra un banner quando l'utente ha trascorso un determinato periodo di tempo sul sito.

Banner predefiniti al termine dell'elaborazione 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 un'azione, ad esempio scorrere o compilare un modulo). Questo approccio ha permesso di evitare di interrompere l'attività dell'utente.

Prompt contestuali per gli utenti maturi

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:

Un banner personalizzato per le richieste basate sul tempo

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

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 conversioni aumentate del 61% , un risultato significativo per l'attività, dato l'elevato valore di transazione di ogni conversione.

Per una startup con risorse limitate, la scelta della piattaforma giusta può essere fondamentale per il successo dell'attività. Il passaggio a una PWA incentrata su velocità, resilienza e coinvolgimento ci ha permesso di aumentare il rapporto tra entrate e spesa di marketing 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