A história de uma startup criando a melhor experiência na Web.
Sobre
Fundado em 2015, a Truebil é um mercado on-line indiano que vende carros usados 100% certificados. Com mais de 1, 4 milhão de usuários ativos por mês, a plataforma é uma solução completa que inclui transferência de propriedade, seguro, empréstimos e garantias de serviço. 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 destaca o produto com recursos valiosos, como recomendações personalizadas baseadas em aprendizado de máquina, além de adicionar aos favoritos, 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 a 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 significativamente mais baixos de aquisição de clientes do que criar um app Android/iOS. Com um Progressive Web App (PWA), o Truebil pode ter todos os benefícios da Web e do iOS/Android.
Solução
Uma equipe interna levou quatro meses para desenvolver o Truebil Lite usando o React, Django e Preact (para migração de produção). Eles definem princípios orientadores claros para o app da Web com base nos objetivos dos usuários. A experiência precisava ser:
- Rápido no primeiro carregamento e nas navegações subsequentes;
- confiáveis, independentemente das restrições de rede ou dispositivo do usuário; e
- Interessante, especialmente para telas pequenas de dispositivos móveis, para que os usuários queiram retornar a ela.
Otimizar para primeiro carregamento e navegação rápidos
Usando o Lighthouse para orientar as otimizações de desempenho, a equipe adotou uma cultura que prioriza o desempenho ao implementar novos recursos. A Truebil conseguiu melhorar significativamente a experiência do usuário priorizando as métricas Primeira exibição de conteúdo e Tempo para interação da página (TTI, na sigla em inglês) e otimizando para primeiros carregamentos rápidos, visitas repetidas e navegação suave. A equipe alcançou esses resultados definindo orçamentos de performance e usando uma variedade de técnicas para alcançá-los.
Definir orçamentos de performance
Pensando no desempenho, 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 dos apps da Web com a renderização no lado do cliente pode ser difícil. Por isso, a Truebil define orçamentos de desempenho muito rigorosos para garantir que a velocidade não seja comprometida, especialmente à medida que mais recursos são adicionados.
A equipe definiu orçamentos rígidos baseados em marcos para TTI com o objetivo de mantê-los abaixo de cinco segundos. Para atingir essa meta, a empresa garantiu manualmente que nenhuma versão excederia um tamanho de pacote JavaScript de 250 KB, manteve uma verificação constante dos tamanhos das imagens e rastreou continuamente a pontuação de desempenho do Lighthouse do app.
Pacotes do JavaScript do Optimize
A equipe começou com o básico usando o padrão PRPL para pré-armazenar em cache e otimizar payloads do JavaScript e progredindo para HTTP/2 para disponibilizar pacotes JavaScript essenciais.
Para fazer o carregamento lento de recursos não críticos, eles usaram os componentes de carregamento lento no nível do framework para carregar fragmentos abaixo da dobra.
Para remover gargalos dos pacotes JavaScript, a equipe reduziu os payloads com a divisão de código. A equipe usou agrupamentos com base em componentes e rotas para reduzir o tamanho do pacote principal e melhorar o tempo de carregamento em 44%. O TTI caiu de 6 para cerca de 5 segundos e a Primeira exibição significativa (FMP, na sigla em inglês) de 4,1 segundos para 3,6 segundos.
CSS essencial inline
Para melhorar ainda mais a FMP, a equipe usou o Lighthouse para encontrar oportunidades e validar o impacto das otimizações de desempenho. O Lighthouse indicou que a redução do CSS no bloqueio de renderização teria o maior efeito, então o Truebil embutia todos os CSSs críticos e CSS não essenciais adiados. Essa técnica reduziu a FMP em cerca de dois segundos.
Evitar várias viagens de ida e volta caras para qualquer origem
Para reduzir a sobrecarga do DNS e do TLS, o Truebil usou <link rel="preconnect"> e <link rel="dns-prefetch">. Essa abordagem faz com que o navegador conclua o handshake de TLS o mais rápido possível após o carregamento da página e resolva previamente nomes de domínio de origem cruzada, permitindo uma experiência do usuário segura e ágil.
<link rel=preconnect>.Fazer a pré-busca dinâmica da próxima página
Ao analisar os dados, a equipe identificou as jornadas do 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 a 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 da Truebil, com cada listagem de produto que inclui até 40 imagens. Para garantir que as imagens não bloqueiem o carregamento da página, a equipe optou por veicular todos os recursos a partir de uma CDN e usar imagemagick para a otimização delas. Ele também compactou em gzip todos os recursos compactáveis, incluindo imagens, JavaScript e CSS, para reduzir ainda mais o tempo de carregamento.
Para evitar a passagem de texto invisível e manter o tempo de carregamento o menor possível, o Truebil configurou o CSS para usar fontes do sistema como substitutas até que as fontes externas sejam carregadas.
Outras otimizações
Quando o aplicativo estava pronto, a equipe queria reduzir ainda mais o tamanho do pacote de fornecedores e o tempo de execução do JavaScript. Por isso, mudou o aplicativo React para Preact na produção. Saiba mais na coleção React. Essa abordagem ajudou a reduzir o tamanho do pacote de fornecedores de 82,3 KB para 51,2 KB.
Construir confiabilidade
Com foco no mercado indiano, a grande maioria dos usuários da Truebil acessa seu produto em redes desorganizadas que, às vezes, têm larguras de banda baixas, como 2G. Por isso, criar uma experiência resiliente foi fundamental não apenas para melhorar o desempenho sob condições de rede restritas, mas também para oferecer um produto em que os usuários pudessem confiar e que sempre funciona.
Uma estratégia de armazenamento em cache híbrido para carregamento confiável
A interatividade e a taxa de mudança do conteúdo do Truebil variam muito. Para garantir que todo o conteúdo seja atualizado e confiável, a equipe do Truebil implementou o armazenamento em cache da API usando uma combinação de estratégias que priorizam a rede, o cache e o mais rápido.
Para páginas estáticas, como a página de assinaturas, o Truebil usa uma estratégia que prioriza o cache para ir primeiro ao cache da API de assinatura, voltando para a rede.
Em páginas com conteúdo dinâmico que raramente é alterado, como páginas de detalhes ou de informações do produto, o Truebil usa uma estratégia que prioriza a rede para que o navegador primeiro verifique a rede em busca de conteúdo antes de voltar ao cache da API se ela não estiver disponível.
Para páginas dinâmicas que mudam com frequência, como página inicial, filtro, pesquisa e cidade, a Truebil usa a estratégia mais rápida para escolher entre rede ou cache com base no que ocorrer primeiro. Para garantir que o conteúdo esteja atualizado, o cache será atualizado sempre que a resposta da rede for diferente do que está no cache.
Service workers para uma experiência off-line completa
Ainda que grande parte do conteúdo da Truebil seja altamente dinâmico, com carros que podem ser adicionados ou comprados a qualquer momento, a equipe queria garantir que os usuários tivessem algum conteúdo com que interagir, mesmo que passassem por redes desorganizadas ou estivessem completamente off-line.
Com os service workers, a equipe conseguiu armazenar em cache os dados estáticos e dinâmicos com que um usuário já interagiu para que o usuário possa visualizá-los off-line. Para garantir que os usuários saibam que o conteúdo pode mudar quando eles ficarem on-line novamente, a equipe mudou a interface para escala de cinza a fim de indicar o modo off-line. A navegação pelas páginas de produto é uma parte essencial da jornada do usuário do Truebil. Os usuários que visitaram o PWA pelo menos uma vez podem navegar pelas páginas de detalhes e produtos, mas não vão ter acesso a atualizações.
Aumente 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 app da Web de carregamento rápido com um produto com recomendações altamente relevantes para aumentar as conversões. Embora a equipe use um sistema de recomendação com base em filtros sofisticados para os usuários atuais, o sistema não funciona para quem faz login pela primeira vez.
Para evitar dar uma inicialização a frio aos novos usuários, a equipe integrou um sistema de recomendações usando as iniciativas de marketing digital. Eles adicionam detalhes do produto, como modelo do carro, preço e tipo de corpo, 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 sistema não leia esses detalhes no URL, ele vai recorrer aos carros mais populares, que são uma combinação de modelos, orçamentos e carros populares nas últimas semanas ou dias.
Um app da Web instalável
Tendo criado um aplicativo da web rápido e completo, com uma experiência do usuário atraente, a Truebil queria garantir que seus usuários continuassem voltando. A empresa percebeu que tornar o app instalável tornaria as visitas repetidas com muito mais facilidade.
A equipe implementou o recurso Adicionar à tela inicial para transformar o produto em um Progressive Web App (PWA). Com essa abordagem, os usuários podiam adicionar o Truebil Lite à tela inicial e o iniciar no modo de tela cheia. E como já havia implementado um modo off-line, a equipe conseguiu adicionar o novo recurso facilmente.
Para garantir que os usuários não recebam spam e aumentar a probabilidade de instalação do app, a equipe atualizou recentemente a estratégia de promover a instalação do PWA para que as solicitações apareçam quando forem realmente úteis para diferentes tipos de usuários. A Truebil definiu uma estratégia de três partes:
- Mostrar solicitações quando o usuário tiver concluído uma ação ou estiver inativo.
- Mostrar solicitações contextuais para usuários adultos.
- Mostre 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 com tráfego intenso
A equipe decidiu mostrar um banner de instalação quando um usuário conclui uma tarefa ou está em páginas de tráfego intenso, mas inativo (ou seja, não executando uma ação, como rolar ou preencher um formulário). Essa abordagem permitiu que evitassem a interrupção da atividade do usuário.
Solicitações contextuais para usuários adultos
Para usuários que interagiam com o aplicativo por algum tempo, a equipe usou mensagens personalizadas altamente contextuais para mostrar o valor de instalar o aplicativo na tela inicial:
Um banner personalizado para comandos 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 abrir uma página de detalhes ou depois que o usuário passa um tempo definido no app:
Devido a essas melhorias, as taxas de conversão e engajamento da Truebil cresceram significativamente, com sessões de usuários 26% mais longas e 61% mais conversões, o que é significativo para os negócios da empresa, considerando o 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. Ao migrar para um PWA com foco em velocidade, resiliência e engajamento, conseguimos aumentar nossos gastos com receita com marketing em 80% graças ao aumento nas conversões e ao alcance fácil da Web.
Rakesh Raman, cofundador e diretor de produtos e ciência de dados da Truebil
44%
Melhoria no tempo de carregamento
26%
Sessões mais longas do usuário
61%
Aumento nas conversões
80%
de aumento nos gastos de receita com marketing