Ao usar ferramentas de monitoramento de usuários reais e se concentrar em melhorar as Core Web Vitals na refatoração do app, a empresa também melhorou a CLS em 72%, além da capacidade de resposta do aplicativo.
A Agrofy é um mercado on-line para o agronegócio da América Latina. Eles combinam compradores e vendedores de máquinas agrícolas, terras, equipamentos e serviços financeiros. No terceiro trimestre de 2020, uma equipe de desenvolvimento de quatro pessoas da Agrofy passou um mês otimizando o site porque eles supostamente acreditavam que a melhoria da performance levaria a uma redução nas taxas de rejeição. Eles se concentraram especificamente em melhorar o LCP, que é uma das Core Web Vitals. Essas otimizações de desempenho levaram a uma melhoria de 70% no LCP, que se correlacionou a uma redução de 76% no abandono no carregamento (de 3,8% para 0,9%).
70%
LCP mais baixa
76%
Redução do abandono de carga
Problema
Ao estudar as métricas de negócios, uma equipe de desenvolvimento da Agrofy notou que as taxas de rejeição pareciam maiores do que os comparativos do setor. A dívida técnica também estava aumentando na base de código do site.
Solução
A equipe da Agrofy apresentou a ideia aos executivos e conseguiu:
- Migrar de uma estrutura mais antiga e descontinuada para uma mais recente e com suporte ativo.
- Otimize o desempenho de carregamento da nova base de código.
A migração levou dois meses. Além da equipe de desenvolvimento de quatro pessoas mencionada anteriormente, essa migração também envolveu especialistas em produtos e UX e um arquiteto de software. O projeto de otimização levou um mês para ser concluído pela equipe de desenvolvimento de quatro pessoas. Eles se concentraram na LCP, na CLS (outra métrica das Core Web Vitals) e na FCP. Otimizações específicas incluídas:
- Carregamento lento de todos os elementos não visíveis com a API Intersection Observer.
- Ofereça recursos estáticos mais rapidamente com uma rede de entrega de conteúdo.
- Carregamento lento de imagens
com
loading="lazy". - Renderização do lado do servidor do conteúdo do caminho crítico de renderização.
- Pré-carregue e pré-conecte recursos essenciais para minimizar os tempos de handshake.
- Usar ferramentas de monitoramento de usuários reais (RUM, na sigla em inglês) para identificar quais páginas de detalhes do produto estavam com muitas mudanças de layout e fazer ajustes na arquitetura da base de código.
Confira a postagem do blog de engenharia da Agrofy para mais detalhes técnicos.
Depois de ativar a nova base de código em 20% do tráfego, eles lançaram o novo site para todos os visitantes no início de setembro de 2020.
Resultados
As otimizações da equipe de desenvolvimento levaram a melhorias mensuráveis em várias métricas diferentes:
- A LCP melhorou 70%.
- O CLS melhorou em 72%.
- O bloqueio de solicitações JS foi reduzido em 100%, e o bloqueio de solicitações CSS foi reduzido em 80%.
- Tarefas longas foram reduzidas em 72%.
- Primeira CPU ociosa melhorou em 25%.
No mesmo período, os dados de monitoramento de usuários reais (também conhecidos como dados de campo) mostraram que a taxa de abandono de carregamento nas páginas de detalhes do produto caiu 76%, de 3,8% para 0,9%:
