Como o investimento da Rakuten 24 nas Principais métricas da Web aumentou a receita por visitante em 53,37% e a taxa de conversão em 33,13%

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

Hayoung Lee

Linh Duong

Ryunosuke Akiba

Shogo Kashiwase

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. — Alguns exemplos de capturas de tela da página inicial do Rakuten 24.

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 como dns-prefetch, preconnect e preload).
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.

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.

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. — O impacto da LCP na taxa de conversão.

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. — O impacto da LCP na receita por visitante.

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. — O impacto da LCP no valor médio do pedido.

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. — O impacto da FID na taxa de conversão.

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.

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.

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. — Resultado do teste de carregamento de dispositivos móveis das versões A e B.

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.

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.