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:
- Uso de gerenciadores
unload
- Uso da diretiva
no-store
em cabeçalhosCache-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:
- Descarregar manipuladores: use o evento
pagehide
em vez deunload
, porque o eventounload
é muito pouco 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 descontinuar gradualmente o uso dos gerenciadoresunload
. Cache-control: no-store
(ou CCNS, abreviação de "cache de volta/avanço" em inglês): mudar o cabeçalhoCache-control
deno-store
parano-cache
pode ativar o bfcache. O Chrome também planeja começar a armazenar 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 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
.
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.
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:
- Acessar a lista de artigos
- Clique em um artigo para ler
- Voltar à 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.
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.
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:
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.