O cache de avanço e retorno (ou bfcache) é uma otimização do navegador que permite voltar e avançar na navegação. Ele melhora significativamente a experiência de navegação dos usuários, especialmente em sites que envolvem muitas navegações de volta e para frente.
Artigo do web.dev sobre bfcache
Campanhas do Yahoo! A JAPAN News, uma das plataformas de notícias mais populares do Japão, fez um esforço conjunto para melhorar a taxa de acertos do bfcache e teve melhorias significativas na experiência do usuário e nos negócios como resultado. Especificamente, os resultados do teste A/B que eles realizaram mostraram que as páginas que usam bfcache tiveram um aumento de 9% na receita de publicidade.
Este estudo de caso explica como o Yahoo! O JAPAN News removeu os bloqueadores do bfcache e como o bfcache melhorou drasticamente a experiência do usuário.
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! JAPAN News enfrentou:
- Uso de gerenciadores
unload. - Uso da diretiva
no-storeem cabeçalhosCache-control.
Para verificar bloqueadores importantes no seu site, acesse Chrome DevTools > Aplicativos > Cache de avanço e retorno.
Outra opção é usar a API notRestoredReasons
para ter uma visão mais abrangente dos bloqueadores com base no uso real no campo.
Saiba como o Yahoo! A JAPAN News removeu os bloqueadores:
- Substituição de manipuladores de descarregamento: eles usavam o evento
pagehideem vez do eventounload, já queunloadé muito não confiável. OPermissions-Policy: unload=()foi lançado no Chrome 115 para que os sites possam remover de forma confiável os manipuladoresunloadde origens específicas. O Chrome planeja descontinuar gradualmente os gerenciadores deunload. - Mudança no
cache-control: mudar o cabeçalhoCache-controldeno-store(CCNS) parano-cacheativa o bfcache. O Chrome está planejando 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. A ressalva é que as páginas com CCNS não se beneficiam de nenhuma tecnologia de armazenamento em cache, incluindo servidores de borda de 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.
Para saber mais sobre as opções de cache-control, consulte o fluxograma de cache-control.
Teste A/B para demonstrar o impacto
Para medir o impacto do bfcache, o Yahoo! A JAPAN News fez um teste A/B por duas semanas. Eles veicularam uma versão das páginas com as correções do bfcache em um grupo e uma versão com páginas não qualificadas para o bfcache em outro. Eles testaram caminhos de URL com tráfego significativo para garantir que o teste alcançasse resultados relevantes. Não havia outras diferenças visuais ou funcionais entre as páginas.
Confira um vídeo que compara o site com e sem 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 bfcache ativado teve um aumento significativo nas visualizações de página e na receita de anúncios, especialmente em dispositivos móveis.
Confira detalhes sobre o impacto observado pelo Yahoo! JAPAN News com o teste A/B do bfcache. Confira mais informações no estudo de caso.
Quando a navegação para frente e para trás entre páginas se torna instantânea com o bfcache, os usuários tendem a permanecer mais tempo nas páginas, aumentando as visualizações de anúncios e, consequentemente, a receita de publicidade.
Experiência do usuário integrada
Quando as páginas carregam instantaneamente, a navegação fica mais fluida.
No Yahoo! No JAPAN News, uma das principais jornadas do usuário é ler vários artigos:
- Acesse a lista de artigos.
- Clique em um artigo para ler.
- Quando terminar, volte para a lista de artigos.
- Clique em outro artigo para ler.
Antes do bfcache, quando os usuários terminavam de ler um artigo, eles precisavam esperar que a página da lista de artigos fosse carregada novamente. Isso pode ser um fator de atrito para usuários que querem voltar rapidamente à lista para escolher outro artigo para ler.
Outra fonte de atrito durante a navegação para trás era a posição de rolagem. Na prática, o navegador tenta restaurar a posição de rolagem quando uma navegação para trás acontece. No entanto, devido a anúncios adicionados dinamicamente ou outras mudanças de layout, a posição de rolagem pode ser restaurada incorretamente. Isso confunde o usuário ou faz com que ele abandone a página.
Esse problema é resolvido quando a navegação para trás é feita pelo bfcache: a posição de rolagem é restaurada imediatamente e corretamente.
Agora, com o bfcache, a fricção na jornada do usuário desapareceu. Os usuários podem voltar instantaneamente para a página da lista de artigos e escolher outro 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 voltam:
Em resumo, os benefícios do bfcache para o Yahoo! O JAPAN News inclui:
- Aumento nas visualizações de página: os usuários tinham mais probabilidade de navegar no site quando as páginas eram armazenadas em cache com bfcache.
- Aumento da receita: como resultado do aumento de visualizações de página por sessão, a impressão de anúncios aumentou, o que resultou em um aumento de 9% na receita em dispositivos móveis, em comparação com o grupo de teste sem bfcache.
Implementar o bfcache agora
Em resumo, o bfcache não apenas torna seu site instantâneo, mas também pode reduzir o atrito na experiência geral do usuário e aumentar o engajamento no site.
A equipe do Chrome está sempre analisando os bloqueadores do bfcache, principalmente os motivos listados, já que são razões comuns para o bfcache não ser usado. No futuro, talvez eles não impeçam o uso do bfcache, mas não é preciso esperar até lá. Para aproveitar o bfcache, analise os bloqueadores agora e evite esses padrões comuns (e outros menos comuns).