Como o cache de avanço e retorno ajudou o Yahoo! JAPAN News aumenta a receita em 9% em dispositivos móveis

Yuriko Hirota
Yuriko Hirota

O cache de avanço e retorno (ou bfcache) é uma otimização do navegador que permite a navegação instantânea para frente e para trás. Ele melhora significativamente a experiência de navegação dos usuários, especialmente para sites que envolvem muitas navegações para frente e para trás.

Artigo da web.dev sobre o bfcache

Campanhas do Yahoo! A JAPAN News, uma das plataformas de notícias mais conhecidas do Japão, fez um esforço conjunto para melhorar a taxa de acertos do bfcache e, como resultado, teve melhorias significativas na experiência do usuário e nos negócios. Especificamente, os resultados do teste A/B mostraram que as páginas que usam o bfcache tiveram um aumento de 9% na receita de publicidade.

Neste estudo de caso, vamos explicar como o Yahoo! O JAPAN News removeu os bloqueadores do bfcache e fez melhorias significativas na experiência do usuário com ele.

Como remover bloqueadores do bfcache

O bfcache está disponível desde o Chrome 86 e também em todos os navegadores mais recentes. No entanto, para aproveitar ao máximo o bfcache, é necessário remover possíveis bloqueadores do site. Alguns dos principais obstáculos que o Yahoo! As dificuldades enfrentadas pela JAPAN News foram:

  1. Uso de gerenciadores unload
  2. Uso da diretiva no-store em cabeçalhos Cache-control

Para verificar os principais bloqueadores do seu site, acesse Chrome DevTools > Applications > Back/forward Cache (mais detalhes) ou use a API notRestoredReasons para ter uma visão mais abrangente dos bloqueadores com base no uso real no campo.

Veja como o Yahoo! JAPAN News removeu seus bloqueadores:

O CCNS é destinado a páginas que nunca devem ser armazenadas em cache, em nenhuma circunstância. Isso significa que qualquer página com CCNS não poderá se beneficiar de nenhuma tecnologia de armazenamento em cache, incluindo servidores de borda do CDN e caches locais.

Se você tiver um cabeçalho CCNS, essa é uma ótima oportunidade para discutir quais são as estratégias Cache-control certas para seu site. Confira as principais diferenças entre no-store e no-cache.

Cache-control: no-store Cache-control: no-cache
  • A resposta não pode ser armazenada em caches.
  • Consequentemente, a resposta é buscada por completo em cada solicitação.
  • Use esse campo para respostas particulares.
  • A resposta pode ser armazenada em caches, desde que seja revalidada com o servidor antes de cada uso.
  • Essas devem ser respostas públicas que devem ser sempre revalidadas (por exemplo, a página inicial de um site de notícias – embora, mesmo assim, um tempo de armazenamento em cache muito curto possa melhorar o desempenho e descarregar o trabalho dos servidores principais).

Se você quiser saber mais sobre as opções de Cache-control, este fluxograma pode ajudar.

Impacto do bfcache em números

Para medir o impacto do bfcache, o Yahoo! JAPAN News realizou um teste A/B por duas semanas, em que veiculou uma versão de suas páginas com suas correções de bfcache para um grupo e uma versão com páginas não qualificadas para bfcache para outro. Eles escolheram os caminhos de URL com uma quantidade significativa de tráfego para que o teste pudesse alcançar resultados significativos. Não havia outra diferença visual ou funcional entre as duas versões.

Confira um vídeo que compara o site com e sem o bfcache. É possível notar que o site com o bfcache ativado carrega muito mais rápido durante uma navegação para frente ou para trás.

O que é realmente promissor é que o grupo com o bfcache ativado teve um aumento significativo nas visualizações de página e na receita de anúncios, especialmente em dispositivos móveis.

Confira os detalhes sobre o impacto observado pelo Yahoo! JAPAN News com o teste A/B do bfcache. Confira mais informações no artigo do estudo de caso.

Métricas % de aumento (dispositivo móvel) % de aumento (computador)
Taxa de acerto do bfcache +54,03 pontos (0,04% → 54,07%) +47,28 pontos (0,02% → 47,30%)
Visualizações de página +2,26% +0,65%
Receita de anúncios +9,0% +0,6%

Quando as navegações de avanço e retorno entre páginas se tornam instantâneas com o bfcache, os usuários tendem a permanecer nas páginas por mais tempo, aumentando assim as visualizações de anúncios, levando a um aumento na receita de publicidade.

O bfcache melhora a experiência do usuário no site

Quando as páginas carregam instantaneamente, a navegação fica mais tranquila.

No Yahoo! JAPAN News, uma das principais jornadas do usuário, é a seguinte:

  1. Acessar a lista de artigos
  2. Clique em um artigo para ler
  3. Voltar à lista de artigos
  4. Clique em outro artigo para ler

Antes do bfcache, quando os usuários terminavam de ler um artigo (etapa 2), eles precisavam esperar a página da lista de artigos ser carregada novamente. Isso pode ser um fator de atrito para usuários que só querem voltar à lista de artigos para escolher outro artigo para ler.

Outra fonte de atrito durante a navegação para trás foi a posição de rolagem. Na prática, o navegador tenta restaurar a posição de rolagem quando ocorre uma navegação para trás. No entanto, devido a anúncios adicionados dinamicamente ou outras mudanças de layout, a posição de rolagem geralmente é restaurada incorretamente, o que pode fazer com que os usuários percam o rumo ou até mesmo saiam da página. Isso nunca é um problema quando uma navegação para trás usa o bfcache: a posição de rolagem é restaurada de maneira imediata e correta.

Duas sequências de imagens de uma navegação reversa de um artigo para a página de listagem do artigo. A parte de cima é uma tira de filme do processo sendo processado com bfcache, que leva 0,3 segundo, enquanto a parte de baixo é do mesmo processo sendo processado sem bfcache, que leva 3,3 segundos.

Agora, com o bfcache, o atrito da jornada do usuário desapareceu. Os usuários podem voltar instantaneamente à página da lista de artigos e escolher outro artigo para ler sem ter que esperar o carregamento dessa página.

O mesmo acontece quando os usuários navegam de um artigo diretamente para outro e vice-versa:

Uma imagem animada mostrando o fluxo de navegação reversa de um artigo para a página de listagem de artigos com e sem bfcache. Com o bfcache, a navegação para trás não é apenas mais rápida, mas a posição de rolagem é mantida com precisão. Sem o bfcache, essas garantias não podem ser feitas.

Em resumo, os benefícios de usar o bfcache para o Yahoo! A JAPAN News inclui:

  • Aumento das visualizações de página: a probabilidade de os usuários navegarem no site era maior quando as páginas eram armazenadas em cache com o bfcache.
  • Aumento da receita: como resultado do aumento de visualizações de página por sessão, as impressões de anúncios aumentaram, o que resultou em um aumento de 9% na receita em dispositivos móveis em comparação com o grupo de teste sem bfcache.

Conclusão

Em resumo, o bfcache não apenas torna seu site instantâneo, mas também pode reduzir a fricção na experiência geral do usuário e aumentar o engajamento no site.

A equipe do Chrome está sempre analisando os bloqueadores de bfcache, principalmente os dois motivos listados neste artigo, porque são motivos comuns para não usar o bfcache. No futuro, isso pode não impedir o uso do bfcache, mas não é necessário esperar até lá. Você pode aproveitar o bfcache analisando os bloqueadores e evitando esses padrões comuns e outros menos comuns.