Ao medir as Métricas da Web de usuários reais, a Rakuten 24 também descobriu que uma boa Largest Contentful Paint (LCP) pode levar a um aumento na taxa de conversão de 61,13%.
A Rakuten 24 é uma loja on-line que colabora com grandes fabricantes multinacionais e domésticos de bens de consumo para oferecer uma grande variedade de necessidades diárias, incluindo saúde, bebidas, suprimentos para animais de estimação, produtos para bebês e muito mais. Esta loja é fornecida pela Rakuten Group, Inc., uma empresa líder global em serviços de Internet, e está entre as melhores em plataforma de marketplace digital no Japão.
Entendendo o impacto do desempenho da Web na experiência do usuário, a equipe da Rakuten 24 vem medindo, otimizando e monitorando continuamente as Core Web Vitals e outras métricas.
Como resultado, mais de 75% dos usuários estão com boa Maior exibição de conteúdo (LCP), Latência na primeira entrada (FID) e Primeira exibição de conteúdo (FCP). No entanto, eles ainda estão trabalhando em melhorias da Cumulative Layout Shift (CLS).
Após analisar os dados da página inicial, a Rakuten 24 descobriu que uma boa pontuação de LCP pode levar a:
- Um aumento de até 61,13% na taxa de conversão.
- 26,09% em receita por visitante.
- 11,26% no valor médio do pedido.
- Uma boa pontuação de FID pode levar a um aumento de até 55,88% na taxa de conversão.
Para correlacionar ainda mais as Core Web Vitals e as métricas de negócios, a Rakuten 24 também realizou um teste A/B com foco na otimização das Core Web Vitals e das métricas relacionadas, e observou uma melhoria de:
- 53,37% em receita por visitante.
- 33,13% na taxa de conversão.
- 15,20% no valor médio do pedido.
- 9,99% em tempo médio gasto.
- Uma redução de 35,12% na taxa de saída.
Destaque a oportunidade
Embora otimizar o desempenho na Web seja um investimento inteligente para melhorar a experiência do usuário e o crescimento dos negócios, a equipe da Rakuten 24 entende como pode ser difícil convencer as partes interessadas a adotar as Core Web Vitals e se concentrar no desempenho da Web. Eles acreditam que mostrar às partes interessadas exatamente qual tipo de otimização de desempenho de retorno do investimento (ROI) pode trazer é a melhor maneira de fazê-las participar.
Por ser um serviço relativamente novo e independente, a Rakuten 24 aproveitou a vantagem de flexibilidade para enfrentar o desafio. Eles acreditam que o resultado do estudo de caso os ajudaria a tomar decisões mais orientadas por dados no futuro, bem como ajudar outros desenvolvedores a medir o impacto do trabalho e a convencer as partes interessadas de que melhorar o desempenho vale o investimento. Descubra como eles fizeram isso nesta postagem.
![Exemplos de capturas de tela da página inicial do Rakuten 24, com molduras de dispositivos móveis ao redor de cada uma.](https://web.dev/static/case-studies/rakuten/image/example-screenshots-raku-193c464c35da7.jpg?authuser=5&hl=pt)
Otimizar o JavaScript e recursos
- Elimine os recursos que bloqueiam a renderização.
- Divida o código e use o
import()
dinâmico. - Divida todo o conteúdo em partes separadas e carregue lentamente arquivos HTML abaixo da dobra.
- Execute e carregue o JavaScript sob demanda.
- Identifique recursos lentos do JavaScript e otimize o processo de carregamento usando o atributo assíncrono nas tags
<script>
e estabelecendo conexões antecipadas a origens importantes (dicas de recurso comodns-prefetch
,preconnect
epreload
). - Remova códigos não usados e reduza e compacte o código.
- Use uma CDN.
- Controle o armazenamento em cache usando o Service Worker com o Workbox.
Otimizar imagens
- Carregamento lento de imagens abaixo da dobra
- Otimize imagens com uma CDN, forneça imagens de tamanho adequado, compacte imagens e adote os formatos de imagem certos para seu trabalho (WebP, SVG, fontes da Web).
Otimizar a CLS
- Use CSS
aspect-ratio
para reservar o espaço necessário para imagens enquanto elas são carregadas. - Use CSS
min-height
para minimizar as mudanças de layout enquanto os elementos têm carregamento lento.
Medição da performance
Além de usar o PageSpeed Insights para auditar o site, a equipe queria encontrar uma maneira melhor de saber a experiência dos usuários em campo. Por isso, a Rakuten 24 decidiu usar a biblioteca JavaScript web-vitals para avaliar as Core Web Vitals e outras métricas no campo e enviar os dados para a ferramenta de análise interna.
![Fluxo de integração de rastreamento das Web Vitals da Rakuten 24. A primeira etapa é integrar a biblioteca web-vitals adicionando o script ao site da Rakuten 24. Depois disso, as Métricas da Web podem ser medidas usando métricas de usuários reais, e os dados são enviados para a ferramenta de coleta de dados interna da Rakuten 24.](https://web.dev/static/case-studies/rakuten/image/rakuten-24s-web-vitals-t-c0d353a93ae67.jpg?authuser=5&hl=pt)
Análise de desempenho
A equipe analisou os dados de campo coletados para determinar se há alguma correlação entre as Core Web Vitals e as principais métricas de negócios. Eles descobriram que os usuários com conversões tendem a ter uma LCP melhor do que os usuários que não converteram.
![Uma comparação entre os usuários que fizeram e os que não fizeram por LCP. O grupo de usuários que realizou conversões com mais frequência teve uma LCP menor.](https://web.dev/static/case-studies/rakuten/image/a-comparison-users-conv-c5d62d1600a03.jpg?authuser=5&hl=pt)
Os dados coletados também revelaram que:
- Uma boa LCP pode levar a um aumento de até 61,13% na taxa de conversão, 26,09% na receita por visitante e 11,26% no valor médio do pedido.
- Um bom FID pode levar a um aumento de até 55,88% na taxa de conversão em comparação com os dados médios gerais.
![LCP agrupada por taxa de conversão e tempo de LCP. Os usuários que fizeram conversões com mais frequência quando a LCP era menor, com 61,13% dos usuários convertendo com uma LCP de um segundo ou menos.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-conversion-62b775421189c.jpg?authuser=5&hl=pt)
![LCP agrupada por receita por visitante e tempo de LCP. Os usuários com uma LCP menor geraram mais receita, com 26,09% mais receita fornecida por usuário quando a LCP era de um segundo ou menos.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-revenue-per-cb892c5f24123.jpg?authuser=5&hl=pt)
![LCP agrupada por valor médio do pedido e tempo de LCP. Os usuários com LCP menor tiveram um valor médio do pedido 11,26% maior quando a LCP era de um segundo ou menos.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-average-ord-f371f7233ed47.jpg?authuser=5&hl=pt)
![FID agrupados por taxa de conversão e horário da FID. Os usuários que fizeram conversões com mais frequência quando a FID era menor, com 55,88% dos usuários fazendo conversões com um FID de 50 milissegundos ou menos.](https://web.dev/static/case-studies/rakuten/image/fid-bucketed-conversion-0d43d40d194cf.jpg?authuser=5&hl=pt)
Monitoramento de desempenho
A equipe criou um painel de monitoramento de desempenho usando os dados coletados no campo e a ferramenta de Business Intelligence. Isso é importante para monitorar o progresso e evitar regressões.
![Uma captura de tela do painel de monitoramento de desempenho interno da Rakuten 24 para cada uma das Core Web Vitals (LCP, CLS e FID).](https://web.dev/static/case-studies/rakuten/image/a-screenshot-rakuten-24-30bf38d4bb335.jpg?authuser=5&hl=pt)
Teste A/B
Acreditando que os testes A/B são uma boa maneira de medir o impacto das otimizações de performance nos negócios, a equipe otimizou uma das páginas de destino para as Core Web Vitals e comparou a versão otimizada com a página original usando um teste A/B por um mês. Ele escolheu uma página de destino com tráfego e conversões significativos para que o teste pudesse alcançar resultados significativos. Durante o teste, 50% do tráfego foi enviado para a página de destino otimizada (versão A) e 50% para a página original (versão B). A única diferença entre as versões A e B foi que a versão A foi otimizada para as Core Web Vitals e não havia outras diferenças funcionais ou visuais.
![Captura de tela de um teste A/B para dispositivos móveis do site da Rakuten 24. Cada versão era visual e funcionalmente a mesma, com a versão A otimizada para melhorar as Core Web Vitals.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-a-mobile-b-23694e6702f81.jpg?authuser=5&hl=pt)
A versão otimizada A terminou de carregar 0,4 segundo antes no teste de carga para dispositivos móveis e não mostra mudança significativa no layout. A CLS da versão A melhorou 92, 72% em comparação com a versão B. Outras pontuações das Métricas da Web também melhoraram: o FID melhorou em 7,95%, a FCP melhorou em 8,45% e o TTFB melhorou em 18,03%.
![Uma comparação da página inicial da Rakuten 24 para startups. A versão A é otimizada para melhor carregamento, com carregamento em até 1,6 segundo, em comparação com a versão B, que carregou em 2 segundos.](https://web.dev/static/case-studies/rakuten/image/a-startup-comparison-the-a6e5d93ff742f.jpg?authuser=5&hl=pt)
Comparando a versão otimizada A com a não otimizada B, a Rakuten 24 descobriu que a versão A proporciona:
- Aumento de 53,37% na receita por visitante.
- 33,13% de aumento na taxa de conversão.
- Aumento de 15,20% no valor médio do pedido.
- Aumento de 9,99% no tempo médio gasto.
- Redução de 35,12% na taxa de saída.
![Uma captura de tela das melhorias nas Core Web Vitals para a página inicial do Rakuten 24. As estatísticas são de um aumento de 53,37% na receita por visitante, de 33,13% na taxa de conversão, de 15,2% no valor médio do pedido, de 9,99% de tempo médio gasto nas páginas e de 35,12% de redução na taxa de saída.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-core-web-vi-5494c342b0223.jpg?authuser=5&hl=pt)
Conclusão
A otimização do desempenho da Web é desafiadora, mas gratificante. Ao adotar uma abordagem baseada em dados, a Rakuten 24 melhorou a experiência do usuário e mediu o impacto positivo nos negócios. Ao entender que isso é apenas uma parte da jornada, e não o destino, eles continuarão melhorando o site para oferecer aos compradores on-line experiências mais agradáveis.
A otimização requer um esforço conjunto, e os desenvolvedores não precisam estar sozinhos nessa jornada. Ao compartilhar suas dificuldades e conquistas, a Rakuten 24 espera que mais desenvolvedores possam usar os dados das Core Web Vitals para desenvolver um entendimento mútuo com as partes interessadas e trabalhar juntos para oferecer uma experiência do usuário de alta qualidade e crescimento dos negócios.