Encontrar a correlação entre o desempenho do site e as métricas de negócios foi a chave para impulsionar o sucesso das suas iniciativas de otimização.
A Swappie é uma startup de sucesso que vende smartphones recondicionados. Por alguns anos, a empresa priorizou a inclusão de novos recursos em vez do desempenho do site. No entanto, quando perceberam que os resultados comerciais no site para dispositivos móveis estavam atrasando em relação à versão para computador, houve uma mudança. A empresa se concentrou em otimizar o desempenho e logo percebeu um aumento na receita de dispositivos móveis.
42%
Aumento da receita proveniente de visitantes que usam dispositivos móveis
10pp*
*ponto percentual de aumento da mCvR relação
Destaque a oportunidade
A Taxa de conversão relativa em dispositivos móveis (Rel mCvR) é calculada dividindo a taxa de conversão em dispositivos móveis pela taxa de conversão em computadores. Há muitas oportunidades para rastrear métricas de velocidade, mas conectá-las às métricas de negócios pode ser um pouco complicado. Como as mesmas campanhas e sazonalidades alcançam dispositivos móveis e computadores, a métrica Rel mCvR remove 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 comércio eletrônico dos Estados Unidos é uma mCvR Rel de 50%, mas a Swappie ficou com 24%. Isso indicou 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 desempenho.
Como medir o impacto das melhorias de desempenho
A Swappie usou o Google Analytics para configurar o acompanhamento diário da mCvR Rel e do tempo médio de carregamento da página em dispositivos móveis, usando esta planilha de modelo (em inglês). Leia as instruções sobre como usar a planilha. A empresa também começou a acompanhar as Core Web Vitals pelo Google Analytics e pelo BigQuery. Com o acompanhamento em vigor, os desenvolvedores começaram a trabalhar no desempenho do site.
Depois de apenas três meses de trabalho, o impacto foi claro: a mCvR Rel passou de 24% para 34% e a receita de dispositivos móveis aumentou em 42%.
23%
Menor tempo médio de carregamento da página
55%
LCP menor
91%
CLS menor
90%
Menor FID
Otimizações
Otimização para LCP e CLS
A equipe de desenvolvimento de Swappie descobriu que havia muito espaço para melhorar pequenas coisas que foram negligenciadas por muito tempo. Ao estudar o site em diferentes janelas de visualização e em idiomas diferentes, destacamos problemas com a LCP e a CLS que eram fáceis de resolver e tiveram um grande impacto no desempenho geral. Por exemplo, renderizar o elemento da LCP no servidor em vez do cliente, quando possível, levou a uma diminuição da LCP.
Detectar mudanças de layout foi difícil, já que elas podem variar muito com base na janela de visualização e na conexão. Depois de receber as Core Web Vitals dos usuários nas análises, eles sabiam que estavam no caminho certo porque a CLS diminuiu.
Imagens
As imagens foram otimizadas com pré-carregamento, carregamento lento e dimensionamento adequado. Elas pré-carregam imagens principais (por exemplo, LCP), enquanto carregam imagens fora da janela de visualização somente quando necessário.
Fontes
A Swappie otimizou as fontes trocando de provedor. Isso causou um grande impacto, porque precisavam de uma maneira ideal de lidar com as famílias tipográficas exigidas por diferentes idiomas.
Scripts de terceiros
Swappie se esforçou muito para revisar cada script e widget de terceiros, onde eles foram usados e as funcionalidades fornecidas. Após discussões com todas as partes interessadas, eles fizeram planos para reduzir o impacto dos scripts no site, mantendo as funcionalidades. Ela removeu o que era desnecessário e otimizou o restante, diminuindo significativamente a quantidade de JavaScript de terceiros no site.
Como remover códigos não utilizados e otimizar os agrupamentos
A otimização das importações e a remoção de JS e CSS não utilizados contribuiu com pequenas melhorias no desempenho do site da Swappie. No entanto, essas pequenas melhorias se acumulam com o tempo. Ela também otimizou a configuração de agrupamento.
Como criar uma cultura de performance na Swappie
O resultado alcançado por Swappie vem não apenas das alterações no código, mas também das mudanças na organização e nas prioridades dela.
O líder de engenharia, Teemu Huovinen, explica:
Você precisa vincular a velocidade do site às métricas de negócios para realmente destacar a importância dela. Tudo se resume à priorização quando você tem pouco tempo e recursos, o que sempre acontece. Priorizar o valor do cliente é o caminho a ser seguido, mas será muito fácil se concentrar em novos recursos e melhorias nas conversões mais diretas se você perceber que a velocidade do site apenas melhora a "sensação" do site. Vincular a velocidade do site às métricas de negócios nem sempre é fácil, e foi aí que o cálculo com o 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, ela ficou mais motivada a se aprofundar.
O que combina nosso impacto com o crescimento da nossa equipe é o que torna o programa ainda mais impressionante. Quatro de nossos sete desenvolvedores começaram no mês, quando começamos a trabalhar no desempenho. Todo o crédito à equipe. É realmente incrível como conseguimos nos discutir sobre o assunto e causar um impacto tão grande.
Teemu Huovinen
Teemu também ressalta a importância de gastar tempo no início para fazer planos baseados em dados, aprender a usar a guia "Desempenho do DevTools" e configurar a análise do usuário antes de fazer qualquer melhoria. Os gráficos (especialmente 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 em campo junto com as pontuações do Lighthouse (com base em laboratório) ajudou a se concentrar na otimização das coisas certas que afetariam a maioria das pessoas.