Como a Truebil transformou a Web no canal de crescimento

A história de uma startup que criou uma experiência na Web de primeira classe.

Sobre

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

Desafio

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

A Truebil identificou os dispositivos móveis como plataforma de destino e escolheu a Web para o primeiro app, o Truebil Lite, devido à facilidade de descoberta e ao baixo atrito 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 menores do que a criação de um app Android/iOS. Ao criar um app Web progressivo (PWA, na sigla em inglês), a Truebil pôde aproveitar todas as vantagens 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 web app 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;
• Envolvente, principalmente para telas pequenas de dispositivos móveis, para que os usuários queiram voltar a ele.

Otimizar para carregamento e navegações rápidos

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

Definir orçamentos de performance

Com uma mentalidade de priorização da performance, a equipe da Truebil optou por arquitetar a experiência como um app de página única com renderização do lado do servidor para o primeiro carregamento e renderização do lado do cliente para os carregamentos subsequentes. Manter o desempenho de apps da Web com renderização do lado do cliente pode ser difícil. Por isso, a Truebil definiu orçamentos de performance muito rigorosos para garantir que a velocidade não seja comprometida, principalmente à medida que mais recursos são adicionados.

A equipe definiu orçamentos rigorosos baseados 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 um tamanho de pacote JavaScript de 250 KB, mantiveram uma verificação constante dos tamanhos de imagem e rastrearam continuamente a pontuação de performance do Lighthouse do app.

Otimizar pacotes JavaScript

A equipe começou com o básico usando o padrão PRPL (link em inglês) para pré-armazenar em cache e otimizar payloads JavaScript e migrando para o HTTP/2 para veicular pacotes JavaScript críticos.

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

Para remover gargalos de pacotes JavaScript, a equipe reduziu os payloads usando a divisão de código. Eles usaram o chunking 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 segundos para cerca de 5 segundos e o First Meaningful Paint (FMP) de 4,1 segundos para 3,6 segundos.

CSS crítico in-line

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 a redução do CSS de bloqueio de renderização teria o maior efeito. Por isso, a Truebil incluiu todo o CSS crítico inline e adiou o CSS não crítico. Essa técnica reduziu o FMP em cerca de 2 segundos.

Evite várias 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 o handshake de TLS assim que possível no carregamento da página e pré-resolva nomes de domínio de origem cruzada, permitindo uma experiência do usuário segura e rápida.

Pré-busca dinâmica 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 baixa dinamicamente o 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é-busca, ela usa o webpack para agrupar o JS desses links.

Otimizar imagens e fontes

As imagens são uma parte essencial da experiência e da credibilidade do produto da Truebil, com cada listagem incluindo até 40 fotos. Para garantir que as imagens não bloqueiem o carregamento da página, a equipe optou por veicular todos os recursos de uma CDN e usar o imagemagick para otimizar as imagens. Eles também compactaram todos os recursos compactá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 substitutas até que as fontes externas sejam carregadas.

Outras otimizações

Quando o app ficou pronto, a equipe quis 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.

Criar confiabilidade

Com foco no mercado indiano, a grande maioria dos usuários da Truebil acessa o produto em redes instáveis que às vezes têm largura de banda de apenas 2G. Por isso, 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 funcionasse.

Uma estratégia de cache híbrida 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 primeiro, cache primeiro e mais rápido primeiro.

Para páginas estáticas, como a de assinaturas, a Truebil usa uma estratégia de cache primeiro para acessar o cache da API de assinaturas e, em seguida, a rede.

Para páginas com conteúdo dinâmico que raramente muda, como as de detalhes ou de informações dos produtos, a Truebil usa uma estratégia de rede em primeiro lugar. Assim, o navegador verifica primeiro a rede em busca de conteúdo antes de voltar ao cache da API se a rede não estiver disponível.

Para páginas dinâmicas que mudam com frequência, como as páginas 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 vier primeiro. Para garantir que o conteúdo esteja atualizado, o cache é atualizado sempre que a resposta da rede difere 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 (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 dados estáticos e dinâmicos com que um usuário já interagiu para que ele possa acessar 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 escala de cinza, indicando 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 o PWA pelo menos uma vez podem navegar pelas páginas de produtos e informações que já acessaram, mas não vão ver atualizações.

Melhorar o engajamento para manter o interesse dos usuários

Uma primeira experiência envolvente

Como a maioria dos usuários vem de canais pagos, a Truebil precisava complementar o web app de carregamento rápido com um produto que apresentasse 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 uma inicialização a frio para os novos usuários, a equipe integrou um sistema de recomendação usando as estratégias de marketing digital. Eles adicionam detalhes do produto, como modelo, preço e tipo de carro, 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. Se o sysme não encontrar esses detalhes no URL, ele vai usar carros populares, que é uma combinação de modelos e orçamentos populares, além de carros que foram populares nas últimas semanas ou dias.

Um app da Web instalável

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

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 iniciassem 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 PWAs. Assim, os avisos de instalação aparecem quando são realmente úteis para diferentes tipos de usuários. A Truebil adotou uma estratégia em três partes:

• Mostrar solicitações quando o usuário concluir uma ação ou ficar inativo.
• Mostrar solicitações contextuais para usuários adultos.
• Mostrar um banner quando o usuário passar um determinado período de tempo 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 de alto tráfego, mas inativo (ou seja, sem realizar uma ação, como rolar ou preencher um formulário). Essa abordagem permitiu que eles evitassem interromper a atividade do usuário.

Comandos contextuais para usuários adultos

Para usuários que interagiram com o app por um tempo, a equipe usou mensagens personalizadas altamente contextuais para mostrar o valor de instalar o app na tela inicial:

Um banner personalizado para solicitações baseadas 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 abrir uma página de detalhes ou depois que o usuário passa um determinado tempo no app:

Devido a essas melhorias, as taxas de conversão e engajamento da Truebil cresceram significativamente, com sessões de usuário 26% mais longas e 61% mais conversões, o que é significativo para a empresa devido ao alto valor de transação de cada conversão.

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

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