Publicado em 28 de janeiro de 2025
Este estudo de caso descreve como a Ray-Ban melhorou as métricas de LCP usando a API Speculation Rules para acelerar as navegações futuras dos usuários usando a pré-renderização e como isso melhorou a performance comercial da plataforma de e-commerce da Ray-Ban. O sucesso desse processo incentivou a Ray-Ban a considerar outras opções para melhorar a performance, como tornar as páginas qualificadas para bfcache.
A Ray-Ban é uma marca de óculos icônica, conhecida por seus estilos atemporais, como o Aviator e o Wayfarer, que combinam designs clássicos com tendências modernas. Como uma das líderes renomadas em óculos, o canal de e-commerce da Ray-Ban desempenha um papel fundamental na garantia da competitividade da empresa, atraindo mais de 80 milhões de visitantes únicos por ano.
Como canal de negócios principal, a Ray-Ban continua melhorando a experiência do usuário na plataforma de e-commerce e reconhece a importância das Core Web Vitals e do impacto direto delas na experiência do usuário na plataforma.
A abordagem contínua da Ray-Ban para melhorar a jornada ideal do usuário
Devido à natureza da arquitetura de aplicativo multipágina (AMP) usada na plataforma de e-commerce da Ray-Ban, sempre que um usuário interage com um link ou botão que exige uma nova página, o navegador envia uma solicitação de navegação para o servidor, que responde com uma nova página HTML. Isso representa um desafio para a Ray-Ban manter uma experiência de navegação tranquila para os usuários, especialmente na página de detalhes do produto (PDP), que foi identificada como um dos pontos de entrada mais usados e é uma parte essencial do funil de conversão.
Graças a um redesign concluído recentemente, a Ray-Ban notou uma melhoria nas métricas das Core Web Vitals. No entanto, ainda há espaço para melhorias, especialmente nos casos em que o uso extensivo de bibliotecas externas é necessário para oferecer uma experiência interativa ao usuário, o que aumenta a métrica Largest Contentful Page (LCP) em comparação com outras páginas.
Por esse motivo, a Ray-Ban optou por implementar o carregamento especulativo para melhorar a jornada ideal do usuário no site. O uso de regras de especulação pode ser uma das soluções mais eficazes para reduzir a velocidade de carregamento percebida da página para navegações futuras, já que ele carrega e renderiza previamente o conteúdo das páginas que o usuário vai visitar em seguida.
Estratégia de pré-renderização específica para dispositivos da Ray-Ban
A Ray-Ban adotou duas estratégias de pré-renderização separadas para considerar as diferenças de comportamento e recursos entre dispositivos móveis e computadores. Essas estratégias foram criadas para maximizar a performance sem comprometer os recursos existentes do site ou a experiência do usuário.
No computador, a pré-renderização é executada passando o cursor sobre os blocos de produtos na página de listagem de produtos (PLP, na sigla em inglês), usando a configuração de prontidão "moderate" e transmitindo como um seletor uma classe de identificação dos mesmos blocos.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container"
}
]
},
"eagerness": "moderate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Como o evento hover não está disponível em dispositivos móveis, a pré-renderização é executada usando uma configuração de immediate nos quatro primeiros blocos, que foram os mais clicados.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
}
]
},
"eagerness": "immediate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Pré-renderizar resultados
As duas estratégias de pré-renderização tiveram um impacto significativo nas métricas das Core Web Vitals das páginas de PDP da Ray-Ban e nas tendências dos KPIs de negócios.
| Dispositivo | LCP | Mudança na taxa de conversão | Mudança na taxa de saída | Taxa de pré-renderização | ||
|---|---|---|---|---|---|---|
| Antes | Depois | Mudança | ||||
| Dispositivo móvel | 4,69s | 2,66 s | 43,28% | +101,47% | -13,25% | 29% |
| Computador | 3,03s | 1,74s | 42,57% | +156,16% | -13,18% | 50% |
As métricas comerciais dos usuários que navegam na página de detalhes do produto gerada pelo servidor foram comparadas com as que navegam na página de detalhes do produto pré-renderizada. Depois de coletar dados do espaço de trabalho de rastreamento da Adobe para usuários com navegadores compatíveis com a API (como o Chrome), a Ray-Ban revelou melhorias significativas que demonstram que os usuários podem navegar pelo site com mais facilidade. Para os outros navegadores, em que o pré-renderização não é compatível, a Ray-Ban decidiu pré-carregar os recursos no momento do evento hover no computador e para os quatro primeiros blocos do PLP em dispositivos móveis.
A implementação da API Speculation Rules para pré-renderização mudou o jogo para a plataforma de e-commerce da Ray-Ban. Com essas estratégias inovadoras, a Ray-Ban conseguiu uma melhoria de 43% no LCP em computadores e dispositivos móveis, melhorando significativamente a experiência do usuário.
Essa otimização não apenas forneceu carregamentos de página quase instantâneos, mas também permitiu muitos dos benefícios da arquitetura do tipo SPA, mantendo a arquitetura atual de MPA, especialmente em páginas importantes, como a PDP.
Do ponto de vista comercial, as melhorias foram transformadoras, como confirmado pelos testes A/B:
- Aumento nas taxas de conversão:
- As taxas de conversão em dispositivos móveis em PDPs aumentaram substancialmente em 101,47%.
- As taxas de conversão em computadores tiveram um aumento ainda mais impressionante de 156,16%.
- Engajamento do usuário aprimorado:
- O número médio de páginas visualizadas por sessão aumentou 51,95% em dispositivos móveis e 65,30% em computadores, indicando uma navegação mais suave e um interesse mais duradouro dos usuários. Observação: não consideramos como "visualizadas" as páginas pré-renderizadas que não foram ativadas.
- Taxas de saída reduzidas:
- As taxas de saída (% de usuários que saem de uma página em relação às visualizações dela) caíram 13,25% em dispositivos móveis e 13,18% em computadores, mostrando uma maior retenção durante momentos de compra importantes.
Ampliação para oferecer mais navegações instantâneas do usuário
Com os excelentes resultados da pré-renderização de PDPs, a Ray-Ban decidiu maximizar ainda mais o potencial da API Speculation Rules com a pré-renderização de links de PLPs no menu. Essa abordagem permite melhorar significativamente a velocidade de carregamento e, consequentemente, a LCP dos tipos de página de catálogo e de produto.
Embora a pré-renderização ajude em navegações futuras, a Ray-Ban também observa uma parte significativa de navegação de ida e volta entre PLP e PDP. Como os resultados do experimento de pré-renderização mostram que a navegação otimizada do usuário está diretamente relacionada a boas métricas de negócios, a Ray-Ban também analisou o cache de avanço e retorno (bfcache).
O bfcache é uma otimização de navegador que oferece navegações instantâneas para frente e para trás, mantendo um snapshot das páginas qualificadas no histórico do navegador na memória e restaurando-as sem passar pela rede. Para garantir que a PDP e a PLP da Ray-Ban estejam qualificadas para o bfcache, várias atualizações rápidas foram feitas:
- Desativa o evento
unloade restringe o acesso às APIs Bluetooth e acelerômetro do dispositivo usando um valor de cabeçalhoPermissions-Policydeunload=(), bluetooth=(), andaccelerometer=(). - Feche as conexões RTC e IndexedDB no evento
pagehide. - Evite o uso desnecessário do cabeçalho de resposta
Cache-Control: no-store.
A ativação do suporte ao bfcache em PLPs em que a navegação de ida e volta representava até 40% do tráfego, enquanto a taxa de acerto do bfcache era 0, resultou em quase 30% de melhoria no LCP e 83% de melhoria no CLS.
| Métricas | 2024-10-13 > 2024-11-9 | 2024-11-24 > 2024-12-21 | Delta |
|---|---|---|---|
| LCP | 3725ms | 2674ms | -28,21% |
| INP | 521ms | 395ms | -24,18% |
| CLS | 0.46 | 0,08 | -82,61% |
| Taxa de ocorrências em cache de avanço e retorno | 0,02% | 72,90% | +72,87pp |
Conclusão
Esses resultados ilustram o potencial da pré-renderização para melhorar significativamente a performance de um site de e-commerce. Ao pré-renderizar páginas com base no comportamento do usuário para navegações futuras, a Ray-Ban não só melhorou as principais métricas da Web, como também aumentou o engajamento do usuário e as vendas. Esse benefício fortaleceu o compromisso da Ray-Ban de oferecer uma navegação suave não apenas para navegações futuras, mas também para navegações de avanço e retorno fornecidas pelo bfcache.
Este estudo de caso destaca como o uso de técnicas modernas de performance da Web pode preencher a lacuna entre as métricas técnicas e os KPIs de negócios, definindo um novo parâmetro para a experiência do usuário e o sucesso do e-commerce.
Agradecemos especialmente a Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard e Jeremy Wagner pela contribuição a este trabalho.