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 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 acessos 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! JAPAN News removeu os bloqueadores do bfcache e como o bfcache melhorou drasticamente a experiência do usuário.

Como remover bloqueadores do bfcache

O bfcache está disponível desde o Chrome 86 e também em todos os navegadores modernos. 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:

Uso de gerenciadores unload
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! A JAPAN News removeu os bloqueadores:

Descarregar manipuladores:use o evento pagehide em vez de unload, porque o evento unload é muito pouco confiável. Além disso, o Permissions-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 descontinuar gradualmente os gerenciadores unload.
Cache-control: no-store (ou CCNS, abreviação de "cache de volta/avanço"): mudar o cabeçalho Cache-control de no-store para no-cache pode ativar o bfcache. O Chrome também planeja começar a armazenar 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 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 de 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 respostas precisam ser públicas e ser revalidadas sempre. Por exemplo, a página inicial de um site de notícias. Mesmo assim, um tempo de armazenamento em cache muito curto pode melhorar o desempenho e reduzir 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! A JAPAN News realizou um teste A/B por duas semanas, em que exibiu uma versão das páginas com as correções do bfcache para um grupo e uma versão com páginas não qualificadas para o 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 houve outras diferenças visuais ou funcionais entre as duas versões.

Confira um vídeo que compara o site com e sem o bfcache. O site com o bfcache ativado carrega muito mais rápido durante a 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 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 ida/volta entre páginas se tornam instantâneas com o bfcache, os usuários tendem a permanecer nas páginas por mais tempo, aumentando as visualizações de anúncios, o que leva a um aumento da receita publicitária.

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

Quando as páginas carregam instantaneamente, a navegação parece mais suave.

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

Outro problema na navegação para trás era 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 é feita pelo bfcache: a posição de rolagem é restaurada de forma 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, a fricção na jornada do usuário acabou. Os usuários podem voltar instantaneamente à página de lista de artigos e escolher outro artigo para ler sem precisar esperar o carregamento da 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: os usuários tinham mais chances de navegar no site 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.