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

Yuriko Hirota

O cache de avanço e retorno (ou bfcache) é uma otimização de navegador que permite a navegação instantânea de retorno e avanço. Ela melhora significativamente a experiência de navegação dos usuários, especialmente em sites que envolvem muitas navegações de ida e volta.
Artigo web.dev sobre bfcache

Campanha do Yahoo! JAPAN News, uma das plataformas de notícias mais famosas do Japão, realizou um esforço conjunto para melhorar a taxa de hits do bfcache e teve como resultado uma experiência do usuário significativa e melhorias 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.

Este estudo de caso explicará como o Yahoo! JAPAN News removeu os bloqueadores do bfcache e como o bfcache melhorou drasticamente a experiência do usuário.

Como remover bloqueadores para o 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, é preciso remover possíveis bloqueadores do site. Alguns grandes obstáculos que o Yahoo! JAPAN As notícias enfrentadas foram:

Uso de gerenciadores unload
Uso da diretiva no-store nos cabeçalhos Cache-control

Para verificar quais são os principais bloqueadores do seu site, acesse Ferramentas do Chrome Dev > Aplicativos > Cache de avanço e retorno (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 os bloqueadores:

Descarregar manipuladores: use o evento pagehide em vez do evento unload, já que o evento unload não é confiável. Além disso, o permission-policy: unload foi lançado no Chrome 115 para que os sites possam remover de forma confiável os gerenciadores unload de origens específicas. O Chrome também planeja desativar gradualmente os gerenciadores unload.
Cache-control: no-store (ou CCNS): mudar o cabeçalho Cache-control de no-store para no-cache pode ativar o bfcache. O Chrome também está planejando começar o armazenamento em cache para bfcache mesmo com um cabeçalho no-store em determinadas circunstâncias.

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

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

`Cache-control: no-store`	`Cache-control: no-cache`
A resposta não pode ser armazenada em caches. Consequentemente, a resposta é buscada integralmente em cada solicitação. Isso deve ser usado para respostas privadas.	A resposta pode ser armazenada em caches desde que seja revalidada com o servidor antes de cada uso. Devem ser respostas públicas que você queira revalidar todas as vezes (por exemplo, a página inicial de um site de notícias, embora 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 é uma ótima ajuda.

Impacto do bfcache em números

Para medir o impacto do bfcache, o Yahoo! O JAPAN News realizou um teste A/B por duas semanas, em que veiculou uma versão das páginas com as correções de bfcache para um grupo e uma versão com páginas não qualificadas para o bfcache para outro. Ele escolheu 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.

Veja um vídeo comparando o site com e sem bfcache. Você pode notar que o site com o bfcache ativado carrega muito mais rápido durante uma navegação de avanço e retorno.

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 publicidade, especialmente em dispositivos móveis.

Estes são os detalhes sobre o impacto observado pelo Yahoo! JAPAN News com o teste A/B do bfcache. (Mais informações podem ser encontradas no artigo do estudo de caso).

Métricas	% de aumento (dispositivos móveis)	% de aumento (computadores)
Taxa de ocorrências 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. Isso aumenta as visualizações de anúncios e a 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 simples.

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

Acessar a lista de artigos
Clique em um artigo para ler
Voltar para a lista de artigos
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 carregar novamente. Isso pode ser um fator de atrito para os usuários que querem apenas voltar à lista de artigos e 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 acontece uma navegação inversa. No entanto, devido a anúncios adicionados dinamicamente ou outras alterações de layout, a posição de rolagem muitas vezes é restaurada incorretamente, o que pode fazer com que os usuários percam o rumo ou até saiam da página. Isso nunca é um problema quando uma navegação para trás é alimentada por bfcache: a posição de rolagem é restaurada de forma imediata e correta.

Duas tiras de filme de uma navegação inversa de um artigo para a página de lista de artigos. A parte de cima é uma tira de filme do processo sendo tratado com bfcache, que leva 0,3 segundo, enquanto a parte de baixo é do mesmo processo que é processado sem bfcache, que leva 3,3 segundos.

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

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

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

Em poucas palavras, as vantagens de usar o bfcache no Yahoo! JAPAN News inclui:

Aumento das visualizações de página: os usuários estavam mais propensos a navegar pelo site quando as páginas foram armazenadas em cache com o bfcache.
Aumento da receita: como resultado do aumento das visualizações de página por sessão, a impressão de anúncios aumentou. Isso 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 reduz atritos na experiência geral do usuário e aumenta o engajamento no site.

A equipe do Chrome está sempre analisando os bloqueadores do bfcache, principalmente os dois motivos listados neste artigo, que são motivos comuns para o bfcache não ser usado. No futuro, isso pode não impedir o uso do bfcache, mas não é necessário esperar até lá. Para se beneficiar do bfcache, analise os bloqueadores do bfcache e evite esses padrões comuns e outros menos comuns.