Como a Truebil transformou a Web no canal de crescimento

A história de uma startup que criou a melhor experiência da Web.

Harleen Batra
Harleen Batra

Sobre

Fundada em 2015, a Truebil é um marketplace indiano on-line que vende carros usados 100% certificados. Com mais de 1, 4 milhão de usuários ativos por mês, é uma solução única que inclui transferência de título, seguros, empréstimos e garantias de serviço. Os clientes em potencial podem acessar páginas de produtos individuais com imagens e relatórios de inspeção detalhados e receber avaliações de veículos com os recursos "Comparar" e "Truescore" do site. A Truebil diferencia seu produto com recursos avançados, incluindo recomendações personalizadas com base em aprendizado de máquina, um recurso de adição aos favoritos, um recurso de compartilhamento de carros e muito mais.

Desafio

A Truebil é uma startup enxuta com transações de alto valor e baixa frequência. Por isso, era fundamental escolher a plataforma certa para priorizar e investir.

A Truebil identificou o dispositivo móvel como a plataforma de destino e escolheu a Web para o primeiro app, o Truebil Lite, por causa da facilidade de descoberta e da baixa fricção da Web. A tecnologia da Web oferece custos de desenvolvimento mais baixos, menos uso de dados e memória e custos de aquisição de clientes significativamente mais baixos do que a criação de um app Android/iOS. Ao criar um app da Web progressivo (PWA, na sigla em inglês), a Truebil pode aproveitar todos os benefícios da Web e os benefícios do iOS/Android.

Solução

Uma equipe interna levou quatro meses para desenvolver o Truebil Lite usando React, Django e Preact (para migração de produção). Eles definiram princípios orientadores claros para o app da Web com base nas metas do usuário. A experiência precisava ser:

  • Rápido no primeiro carregamento e nas navegações subsequentes,
  • Confiável, independente das restrições de rede ou dispositivo do usuário, e
  • Engajamento, especialmente para telas pequenas de dispositivos móveis, para que os usuários queiram voltar a ele.

Otimizar para carregamento e navegações rápidas

Usando o Lighthouse para orientar as otimizações de desempenho, a equipe adotou uma cultura de foco na performance ao implementar novos recursos. A Truebil conseguiu melhorar significativamente a experiência do usuário priorizando as métricas First Contentful Paint e Tempo para interação (TTI) e otimizando para carregamentos rápidos, visitas repetidas e navegação suave. A equipe alcançou esses resultados definindo orçamentos de performance e usando várias técnicas para isso.

Definir orçamentos de performance

Com foco na performance, a equipe da Truebil optou por projetar a experiência como um app de página única com renderização pelo servidor para o primeiro carregamento e renderização pelo cliente para carregamentos subsequentes. Manter apps da Web com renderização do lado do cliente pode ser difícil. Por isso, a Truebil definiu orçamentos de desempenho muito rígidos para garantir que a velocidade não fosse comprometida, especialmente à medida que mais recursos fossem adicionados.

A equipe definiu orçamentos rigorosos com base em marcos para o TTI com o objetivo de mantê-lo abaixo de cinco segundos. Para atingir essa meta, eles garantiram manualmente que nenhum build excedesse o tamanho de um pacote JavaScript de 250 KB, mantiveram uma verificação constante dos tamanhos de imagem e acompanharam continuamente a pontuação de desempenho do Lighthouse do app.

Otimizar pacotes JavaScript

A equipe começou com o básico, usando o padrão PRPL para pré-cachear e otimizar payloads JavaScript e migrando para HTTP/2 para fornecer pacotes JavaScript críticos.

Para carregar recursos não essenciais de forma lazy load, eles usaram os componentes de carregamento lento no nível do framework para carregar fragmentos abaixo da dobra.

Para remover os gargalos do pacote JavaScript, a equipe reduziu os payloads pela divisão de código. Eles usaram o agrupamento baseado em componentes e rotas para reduzir o tamanho do pacote principal e melhorar o tempo de carregamento em 44%, com o TTI caindo de 6 para 5 segundos e o First Meaningful Paint (FMP) de 4,1 para 3,6 segundos.

Capturas de tela do Chrome DevTools mostrando o tamanho do build do Truebil Lite antes e depois da divisão do código.
Impacto da redução do tamanho do bloco.

CSS essencial inline

Para melhorar ainda mais o FMP, a equipe usou o Lighthouse para encontrar oportunidades e validar o impacto das otimizações de performance. O Lighthouse indicou que reduzir o CSS de bloqueio de renderização teria o maior efeito. Por isso, a Truebil inlineou todos os CSS críticos e adiou os CSS não críticos. Essa técnica reduziu o FMP em cerca de dois segundos.

Capturas de tela do Chrome DevTools mostrando o tempo do Truebil Lite para o primeiro paint significativo antes e depois do inline CSS.
Impacto do inline CSS.

Evite viagens de ida e volta caras para qualquer origem

Para reduzir a sobrecarga do DNS e do TLS, a Truebil usou <link rel="preconnect"> e <link rel="dns-prefetch">. Essa abordagem faz com que o navegador conclua a negociação TLS o mais rápido possível no carregamento da página e resolva previamente os nomes de domínio de origem cruzada, permitindo uma experiência do usuário segura e rápida.

Capturas de tela do Chrome DevTools mostrando o efeito de rel=preconnect.
Impacto da adição de <link rel=preconnect>.

Fazer prefetched dinâmico da próxima página

Ao analisar os dados, a equipe identificou as jornadas de usuário mais comuns que poderiam ser otimizadas. Nesses casos, o app faz o download dinâmico do recurso da próxima página usando <link rel=prefetch> para garantir uma navegação tranquila para os usuários. Enquanto a equipe identifica manualmente os links para pré-carregar, ela usa o webpack para agrupar o JS desses links.

Capturas de tela do app Truebil Lit e do Chrome DevTools mostrando que as solicitações de rede não são necessárias em navegações comuns porque os recursos já foram pré-carregados.
O efeito do pré-carregamento de recursos para jornadas comuns de usuários.

Otimizar imagens e fontes

As imagens são uma parte essencial da experiência e da credibilidade do produto da Truebil, e cada listagem de produto inclui até 40 fotos. Para garantir que as imagens não bloqueiem o carregamento da página, a equipe escolheu servir todos os recursos de um CDN e usar o imagemagick para otimização de imagens. Eles também usaram o Gzip em todos os recursos comprimíveis, incluindo imagens, JavaScript e CSS, para reduzir ainda mais o tempo de carregamento.

Para evitar um flash de texto invisível e manter o tempo de carregamento o mais baixo possível, a Truebil configurou o CSS para usar fontes do sistema como alternativa até que as fontes externas sejam carregadas.

Outras otimizações

Quando o app ficou pronto, a equipe queria reduzir ainda mais o tamanho do pacote do fornecedor e o tempo de execução do JavaScript. Por isso, eles mudaram o app React para Preact na produção. Saiba mais na coleção React. Essa abordagem ajudou a reduzir o tamanho do pacote do fornecedor de 82,3 KB para 51,2 KB.

Integrar confiabilidade

Com foco no mercado indiano, a grande maioria dos usuários da Truebil acessa o produto em redes irregulares que às vezes têm larguras de banda tão baixas quanto 2G. Portanto, criar uma experiência resiliente foi fundamental não apenas para melhorar o desempenho em condições de rede restritas, mas também para oferecer um produto em que os usuários pudessem confiar, que sempre funciona.

Uma estratégia híbrida de armazenamento em cache para carregamento confiável

A interatividade e a taxa de mudança do conteúdo da Truebil variam muito. Para garantir que todo o conteúdo seja atualizado e confiável, a equipe da Truebil implementou o armazenamento em cache da API usando uma combinação de estratégias de rede, de cache e de velocidade máxima.

Para páginas estáticas, como a página de assinaturas, a Truebil usa uma estratégia de cache-first para acessar o cache da API de assinatura primeiro, voltando para a rede.

Para páginas com conteúdo dinâmico que raramente muda, como páginas de detalhes ou de listagem de produtos, o Truebil usa uma estratégia de rede em primeiro lugar para que o navegador verifique primeiro a rede em busca de conteúdo antes de retornar ao cache da API se a rede estiver indisponível.

E para páginas dinâmicas que mudam com frequência, como a página inicial, de filtro, de pesquisa e de cidade, a Truebil usa uma estratégia de prioridade à velocidade para escolher entre rede ou cache com base no que aparecer primeiro. Para garantir que o conteúdo esteja atualizado, o cache é atualizado sempre que a resposta da rede for diferente do que está no cache.

Service workers para uma experiência off-line completa

Embora grande parte do conteúdo da Truebil seja altamente dinâmica, já que os carros podem ser adicionados ou comprados a qualquer momento, a equipe queria garantir que os usuários tivessem algum conteúdo para interagir, mesmo que estivessem em redes instáveis ou completamente off-line.

Usando service workers, a equipe conseguiu armazenar em cache os dados estáticos e dinâmicos com que um usuário já interagiu para que ele possa acessá-los off-line. Para garantir que os usuários saibam que o conteúdo pode mudar quando eles voltarem a ficar on-line, a equipe mudou a interface para tons de cinza para indicar o modo off-line. Navegar pelas páginas de produtos é uma parte essencial da jornada do usuário da Truebil. Os usuários que visitaram a PWA pelo menos uma vez podem navegar pelas páginas "Detalhes do app" e "Detalhes do produto" que visitaram antes, mas não vão poder conferir as atualizações.

Captura de tela do app Truebil Lite no modo off-line.
Modo off-line do Truebil Lite.

Melhorar o engajamento para que os usuários continuem voltando

Uma primeira experiência envolvente

Como a maioria dos usuários vinha de canais pagos, a Truebil precisava complementar o app da Web de carregamento rápido com um produto que mostrasse recomendações altamente relevantes para aumentar as conversões. Embora a equipe use um sistema de recomendação baseado em filtragem sofisticada para usuários atuais, o sistema não funciona para usuários que fazem login pela primeira vez.

Para evitar que os usuários iniciantes tenham uma experiência ruim, a equipe integrou um sistema de recomendação usando os esforços de marketing digital. Eles adicionam detalhes do produto, como modelo do carro, preço e tipo de carroceria, ao URL de destino de um anúncio usando um parâmetro UTM, que é lido pelo sistema de recomendação e refletido nos produtos exibidos. Caso o sysme não leia esses detalhes no URL, ele vai voltar para os carros populares, que é uma combinação de modelos, orçamentos e carros que foram populares nas últimas semanas ou dias.

Um app da Web instalável

Depois de criar um app da Web rápido e completo com uma experiência de usuário atraente, a Truebil queria garantir que os usuários continuassem voltando. Eles perceberam que tornar o app instalável facilitaria muito as visitas repetidas.

A equipe implementou o recurso Adicionar à tela inicial para transformar o produto em um Progressive Web App (PWA) completo. Essa abordagem permitiu que os usuários adicionassem o Truebil Lite à tela inicial e o abrissem no modo de tela cheia. Como já havia implementado um modo off-line, a equipe conseguiu adicionar o novo recurso com facilidade.

Para garantir que os usuários não recebessem spam e aumentar a probabilidade de instalação do app, a equipe atualizou recentemente a estratégia de promoção da instalação de PWA, de modo que os avisos de instalação apareçam quando forem úteis para diferentes tipos de usuários. A Truebil decidiu usar uma estratégia de três partes:

  • Mostrar avisos quando o usuário concluir uma ação ou estiver inativo.
  • Mostre comandos contextuais para usuários maduros.
  • Mostrar um banner quando o usuário passar um determinado período no site.

Banners padrão na conclusão do processo e em páginas de alto tráfego

A equipe decidiu mostrar um banner de instalação quando um usuário conclui uma tarefa ou está em páginas com tráfego intenso, mas inativo (ou seja, não realiza uma ação, como rolar a tela ou preencher um formulário). Essa abordagem permitiu que eles evitassem interromper a atividade do usuário.

Capturas de tela do banner de instalação do Truebil Lite.

Comandos contextuais para usuários maduros

Para os usuários que interagiram com o app por um tempo, a equipe usou mensagens personalizadas altamente contextualizadas para mostrar o valor da instalação do app na tela inicial:

Capturas de tela das solicitações de instalação contextual do Truebil Lite para usuários adultos.

Um banner personalizado para avisos baseados em tempo

Por fim, a equipe criou um banner não intrusivo com um design semelhante a uma notificação que é acionado em eventos específicos, como a abertura de uma página de listagem ou depois que o usuário passa um tempo determinado no app:

Captura de tela do banner de solicitação de instalação com base no tempo do Truebil Lite.

Graças a essas melhorias, as taxas de conversão e engajamento da Truebil aumentaram significativamente, com 26% mais sessões de usuários e 61% mais conversões, o que é significativo para a empresa, considerando o alto valor de cada conversão.

Para uma startup com recursos limitados, escolher a plataforma certa pode ser fundamental para o sucesso do negócio. A mudança para um PWA focado em velocidade, resiliência e engajamento nos permitiu aumentar o gasto de receita com marketing em 80%, graças ao aumento das conversões e ao alcance sem atrito da Web.

Rakesh Raman, cofundador e chefe de ciência de dados e produtos da Truebil

44%

Melhoria no tempo de carregamento

26%

Sessões de usuário mais longas

61%

Aumento nas conversões

80%

Aumento da receita em relação aos gastos com marketing