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

Yuriko Hirota
Yuriko Hirota
X

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 acerto do bfcache e, como resultado, teve uma experiência do usuário e melhorias de negócios significativas. 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! A 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:

  1. Uso de gerenciadores unload.
  2. Uso da diretiva no-store em cabeçalhos Cache-control.

É possível verificar se há bloqueadores importantes no seu site em 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.

Veja como o Yahoo! A JAPAN News removeu os bloqueadores:

O CCNS é destinado a páginas que nunca devem ser armazenadas em cache, em nenhuma circunstância. Isso significa que as páginas com CCNS não se beneficiam 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.

Para saber mais sobre as opções de cache-control, consulte o fluxograma de cache-control.

Testes A/B para demonstrar o impacto

Para medir o impacto do bfcache, o Yahoo! A JAPAN News realizou um teste A/B por duas semanas. Eles exibiram 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 tivesse resultados significativos. Não havia outras diferenças visuais ou funcionais entre as páginas.

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 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 estudo de caso.

Métricas % de aumento (dispositivo móvel) % de aumento (computador)
Taxa de acerto 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 a navegação para frente/trás entre páginas se torna instantânea com o bfcache, os usuários tendem a permanecer nas páginas por mais tempo, aumentando as visualizações de anúncios e, consequentemente, a receita de publicidade.

Experiência do usuário perfeita

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

No Yahoo! JAPAN News, uma das principais jornadas do usuário é a leitura de vários artigos:

  1. Acesse a lista de artigos.
  2. Clique em um artigo para ler.
  3. Quando terminar, volte para a lista de artigos.
  4. Clique em outro artigo para ler.

Antes do bfcache, quando os usuários terminavam de ler um artigo, eles precisavam esperar a página da lista de artigos ser carregada novamente. Isso pode ser um fator de atrito para os usuários que querem voltar rapidamente à lista 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 pode ser restaurada incorretamente. Isso confunde o usuário ou até mesmo 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 de forma imediata e correta.

Duas sequências de imagens de uma navegação para trás. A parte de cima é uma tira de filme processada com bfcache, o que leva 0,3 segundos, enquanto a parte de baixo é o mesmo processo sendo processado sem bfcache, o que leva 3,3 segundos.

Agora, com o bfcache, a fricção na jornada do usuário desapareceu. 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 é mais rápida e a posição de rolagem é mantida com precisão. Sem o bfcache, essas melhorias não são garantidas.

Em resumo, os benefícios do bfcache para o Yahoo! A JAPAN News inclui:

  • Aumento das visualizações de página: os usuários tinham mais probabilidade de navegar pelo site quando as páginas eram armazenadas em cache com o bfcache.
  • Aumento da receita: como resultado do aumento das 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.

Implementar o bfcache agora

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 do bfcache, especialmente os motivos listados, 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 seus bloqueadores agora e evitando esses padrões comuns (e outros menos comuns).