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