Encontrar a correlação entre a performance do site e as métricas de negócios foi fundamental para o sucesso dos esforços de otimização.
A Swappie é uma startup de sucesso que vende smartphones recondicionados. Por alguns anos, a empresa priorizou a adição de novos recursos em vez da performance do site. No entanto, quando notou que os resultados de negócios no site para dispositivos móveis estavam ficando para trás em relação à versão para computadores, houve uma mudança. A empresa se concentrou em otimizar a performance e logo observou um aumento na receita gerada por dispositivos móveis.
42%
Aumento da receita vinda de visitantes de dispositivos móveis
10pp*
*ponto percentual de aumento da mCVR relativa
Destaque da oportunidade
A taxa de conversão relativa em dispositivos móveis (Rel mCvR, na sigla em inglês) é calculada dividindo a taxa de conversão em dispositivos móveis pela taxa de conversão em computadores. Há muitas oportunidades para acompanhar as métricas de velocidade, mas conectá-las às métricas de negócios pode ser bastante complicado. Como as mesmas campanhas e sazonalidades alcançam dispositivos móveis e computadores, a métrica mCVR rel. elimina a influência desses parâmetros externos e mostra apenas se o site para dispositivos móveis está melhorando ou não.
A média dos dez maiores sites de e-commerce dos Estados Unidos é uma mCVR de 50%, mas a Swappie estava em 24%. Isso indicava que o site para dispositivos móveis tinha desafios e que a empresa estava perdendo receita, o que levou ao lançamento do projeto de melhoria de performance.
Como medir o impacto das melhorias de performance
A Swappie usou o Google Analytics para configurar o acompanhamento diário de Rel mCvR e do tempo médio de carregamento de página para dispositivos móveis, usando este modelo de planilha. Leia as instruções sobre como usar a planilha. Eles também começaram a monitorar as Core Web Vitals pelo Google Analytics e pelo BigQuery. Com o rastreamento em vigor, os desenvolvedores começaram a trabalhar na performance do site.
Depois de apenas três meses de trabalho, o impacto foi claro: a Rel mCVR passou de 24% para 34%, e a receita de dispositivos móveis aumentou 42%.
23%
Tempo médio de carregamento da página mais baixo
55%
LCP mais baixo
91%
CLS mais baixo
90%
FID mais baixo
Otimizações
Como otimizar para LCP e CLS
A equipe de desenvolvimento da Swappie descobriu que havia muito espaço para melhorias em pequenas coisas que foram ignoradas por muito tempo. O estudo do site em diferentes viewports e em diferentes idiomas destacou problemas com LCP e CLS que foram fáceis de resolver e tiveram um grande impacto no desempenho geral. Por exemplo, renderizar o elemento LCP no servidor em vez do cliente, quando possível, reduziu o LCP.
Detectar mudanças de layout era um desafio, já que elas podem variar muito com base na viewport e na conexão. Depois de receber as Core Web Vitals dos usuários para a análise de dados, eles souberam que estavam no caminho certo, já que o CLS diminuiu.
Imagens
As imagens foram otimizadas com pré-carregamento, carregamento lento e dimensionamento adequado. Eles carregam imagens principais (por exemplo, LCP) com antecedência, carregando imagens fora do viewport somente quando necessário.
Fontes
A Swappie otimiza fontes trocando de provedor. Isso teve um grande impacto, já que eles precisavam de uma maneira ideal de processar os tipos de letra necessários para diferentes idiomas.
Scripts de terceiros
A Swappie se esforçou muito para analisar cada script e widget de terceiros, onde ele foi usado e as funcionalidades que ele oferecia. Após discussões com todas as partes interessadas, eles planejaram reduzir o impacto dos scripts no site, mantendo as funcionalidades. Eles removeram o que era desnecessário e otimizaram o restante, diminuindo significativamente a quantidade de JavaScript de terceiros no site.
Remover código não utilizado e otimizar o agrupamento
A otimização das importações e a remoção de JS e CSS não usados contribuíram com pequenas melhorias na performance do site da Swappie. No entanto, essas pequenas melhorias se acumulam ao longo do tempo. Eles também otimizaram a configuração de agrupamento.
Como criar uma cultura de performance na Swappie
O resultado alcançado pela Swappie não se deve apenas às mudanças no código, mas também às mudanças na organização e nas prioridades dela.
O líder de engenharia, Teemu Huovinen, explica:
É necessário vincular a velocidade do site às métricas de negócios para destacar a importância dele. Tudo se resume à priorização quando você tem pouco tempo e recursos, o que sempre acontece. Priorizar o valor do cliente é a melhor opção, mas é muito fácil se concentrar em novos recursos e melhorias de conversão mais diretas se você considera a velocidade do site como uma melhoria apenas da "sensação" do site. Nem sempre é fácil vincular a velocidade do site às métricas de negócios, e foi aí que o cálculo com Rel mCvR nos ajudou muito.
Teemu Huovinen
Depois que a equipe de desenvolvedores teve a oportunidade de se concentrar totalmente na velocidade do site por um trimestre, eles ficaram mais motivados para se aprofundar.
Combinar nosso impacto com o crescimento da nossa equipe é o que torna tudo ainda mais impressionante. Quatro dos sete desenvolvedores começaram no mês em que começamos a trabalhar na performance. Todo o crédito é da equipe. É realmente incrível como conseguimos nos unir em torno do tema e ter um impacto tão grande.
Teemu Huovinen
Teemu também destaca a importância de dedicar tempo no início para fazer planos com base em dados, aprender a usar a guia Performance das Ferramentas do desenvolvedor e configurar a análise de usuários antes de fazer melhorias. Os gráficos (principalmente os que vão na direção certa) são uma ótima fonte de feedback e validação para seu trabalho. Analisar as Core Web Vitals no campo com as pontuações do Lighthouse (com base em laboratório) ajudou a empresa a se concentrar na otimização das coisas certas que afetariam a maioria das pessoas.