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çalhosCache-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 eventounload
, já que o eventounload
não é confiável. Além disso, opermission-policy: unload
foi lançado no Chrome 115 para que os sites possam remover de forma confiável os gerenciadoresunload
de origens específicas. O Chrome também planeja desativar gradualmente os gerenciadoresunload
. Cache-control: no-store
(ou CCNS): mudar o cabeçalhoCache-control
deno-store
parano-cache
pode ativar o bfcache. O Chrome também está planejando começar o armazenamento em cache para bfcache mesmo com um cabeçalhono-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
.
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).
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.
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:
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.