Como o foco no desempenho da Web melhorou a taxa de cliques da Tokopedia em 35%

Criar um painel de desempenho da Web e otimizar o JavaScript, os recursos e a página inicial para alcançar o sucesso nos negócios.

A Tokopedia é uma das maiores empresas de comércio eletrônico da Indonésia. Com mais de 2, 7 milhões de redes de comerciantes em todo o país, mais de 18 milhões de listagens de produtos e mais de 50 milhões de visitantes mensais, a equipe da Web sabia que o investimento no desempenho da Web era essencial. Ao criar uma cultura que prioriza o desempenho, a empresa conseguiu um aumento de 35% nas taxas de cliques (CTR) e de 8% nas conversões (CVR).

35%

Aumento na CTR

8%

de aumento na CVR

4s

Melhoria no TTI

Destaque a oportunidade

A equipe da Web conversou com a equipe de liderança sobre a importância de investir no desempenho da Web para melhorar a experiência e o engajamento do usuário e também mostrou o impacto do desempenho usando APIs e padrões avançados.

A abordagem usada

JavaScript e otimização de recursos

JavaScript bloqueado de renderização ou de longa duração é uma causa comum de problemas de desempenho. A equipe tomou várias medidas para minimizar isso:

  • Criação de uma biblioteca de controlador de script para carregar scripts de terceiros seletivamente e otimizar o caminho crítico de renderização.
  • Substituímos bibliotecas mais pesadas por bibliotecas mais leves.
  • Implementação da divisão de código e otimização para conteúdo acima da dobra.
  • Foi implementado o carregamento adaptável, por exemplo, carregando apenas imagens de alta qualidade para dispositivos em redes rápidas e usando imagens de qualidade mais baixa para dispositivos em redes lentas.
  • Imagens com carregamento lento abaixo da dobra.
  • Carregamento adiado de JavaScript não crítico.
A biblioteca de controladores de script melhorou o TTI em quatro segundos

Otimização da página inicial

A equipe usou o Svelte para criar uma versão Lite da página inicial para visitantes novos, garantindo uma experiência rápida no site. Essa versão também usou um service worker para armazenar em cache os recursos não Lite em segundo plano.

Reduzimos o tamanho do JavaScript do app em 88% (de 320 KB para 37 KB). A pontuação do Lighthouse melhorou em 90 pontos. FCP atingido de menos de 1 segundo. Aumento de 35% na CTR. Aumento de 8% na CVR.

Orçamento e monitoramento de performance

A equipe criou um painel de monitoramento de desempenho usando o Lighthouse e outras ferramentas para melhorar a qualidade das páginas da Web:

  • Mede a qualidade da rede, monitoramento da infraestrutura, desempenho do front-end e desempenho do servidor.
  • Usa uma combinação de APIs de plataforma da Web (como a API Resource Timing e o cabeçalho Server-Timing, a API PageSpeed Insights (PSI) e os dados do Chrome User Experience Report para monitorar métricas de campo e laboratório.
  • Analisa imagens do Lighthouse para ajudar a identificar oportunidades de otimização de imagens.
  • Aplica um orçamento de tamanho de pacote durante a integração contínua (CI). A execução da CI falhará se o tamanho do pacote ultrapassar o orçamento.
Pontuação de TTI de 2,2 segundos na página inicial (pontuação do Lighthouse: 88). Pontuação de TTI de 1,9 segundo nas páginas de produto (pontuação do Lighthouse: 86).

Como empresa de comércio eletrônico, a aquisição de usuários é a base do nosso sucesso. Reconhecemos a importância da Web e, por isso, queremos investir em todas as ferramentas e recursos que oferecerão a melhor experiência aos usuários.

Dendi Sunardi, gerente de engenharia, plataforma Web, Tokopedia

Confira a página Estudos de caso da escala na Web para mais histórias de sucesso da Índia e do Sudeste Asiático.