Como a pré-busca ajudou a Terra a aumentar a taxa de cliques dos anúncios em 30% e acelerar a Maior exibição de conteúdo.

A pré-busca de recursos acelera o tempo de carregamento da página e melhora as métricas de negócios.

Guilherme Moser de Souza

Thierno Thiam

A pré-busca é uma técnica usada para acelerar o carregamento de páginas ao fazer o download de recursos ou até mesmo páginas inteiras, que provavelmente serão necessários em um futuro próximo. Pesquisas demonstram que tempos de carregamento mais rápidos resultam em taxas de conversão mais altas e melhores experiências do usuário.

A Terra é um dos maiores portais de conteúdo do Brasil, oferecendo entretenimento, notícias e esportes com mais de 63 milhões de visitantes únicos por mês. Colaboramos com a equipe de engenharia da Terra para melhorar o tempo de carregamento de artigos usando técnicas de pré-busca em determinadas seções do site.

Este estudo de caso descreve a implementação da jornada da Terra que resultou em um aumento de 11% na taxa de cliques (CTR) em anúncios para dispositivos móveis, 30% na CTR de anúncios em computadores e 50% de redução nos tempos de Maior exibição de conteúdo (LCP).

Estratégia de pré-busca

A pré-busca já existe há algum tempo, mas é importante usá-la com cuidado, porque consome mais largura de banda para recursos que não são imediatamente necessários. Essa técnica deve ser aplicada com atenção para evitar o uso desnecessário de dados. No caso do Terra, os artigos são pré-buscados se as seguintes condições forem atendidas:

• Visibilidade de links para artigos pré-buscados:a Terra usou a API Intersection Observer para detectar a visibilidade da seção que continha os artigos que ela queria pré-buscar.
• Condições favoráveis para aumentar o uso de dados:como mencionado anteriormente, a pré-busca é uma melhoria de desempenho especulativa que consome dados extras e esse pode não ser um resultado desejável em todas as situações. Para reduzir a probabilidade de desperdiçar largura de banda, a Terra usa a API Network Information com a API Device Memory para determinar se o próximo artigo precisa ser buscado. O Terraform só busca o próximo artigo quando:
  • A velocidade de conexão é de pelo menos 3G, e o dispositivo tem pelo menos 4 GB de memória.
  • ou se o dispositivo usa o iOS.
• CPU ociosa:por fim, o Terra verifica se a CPU está inativa e pode realizar trabalhos extras usando requestIdleCallback, que usa um callback para ser processado quando a linha de execução principal está inativa ou por um prazo específico (opcional), o que ocorrer primeiro.

Aderir a essas condições garante que a Terra só busque dados quando necessário, o que economiza largura de banda e duração da bateria, além de minimizar o impacto das pré-buscas que acabam não sendo usadas.

Quando essas condições são atendidas, a Terra faz uma pré-busca dos artigos presentes nas seções "Conteúdo relacionado" e "Recomendados para você" destacados em azul abaixo.

Impacto nos negócios

Para medir o impacto dessa técnica, a Terra lançou o recurso primeiro na seção "Conteúdo relacionado" da página do artigo. Um código UTM ajudou a diferenciar entre artigos pré e não pré-buscados para fins de comparação. Depois de duas semanas de testes A/B bem-sucedidos, a Terra decidiu adicionar a funcionalidade de pré-busca à seção "Recomendados para você".

Como resultado da pré-busca de artigos, foi observado um aumento geral nas métricas de anúncios e uma redução dos tempos de LCP e Tempo até o primeiro byte (TTFB):

Métrica	Dispositivo móvel	Computador
CTR de anúncios	+11%	+30%
Visibilidade dos anúncios	+10,5%	+6%
LCP	51%	73%
TTFB	83%	84%

A pré-busca, quando usada com cuidado, melhora muito o tempo de carregamento da página, aumenta as métricas dos anúncios e reduz o tempo de LCP.

Detalhes técnicos

A pré-busca pode ser feita com dicas de recursos, como rel=prefetch ou rel=preload, com bibliotecas como quicklink ou Guess.js ou a nova API Speculation Rules. A Terra optou por implementar isso usando a API fetch com prioridade baixa, combinada com uma instância Intersection Observer. A Terra fez essa escolha porque permite o suporte ao Safari, que ainda não tem suporte a outros métodos de pré-busca, como rel=prefetch ou a API Speculation Rules. Além disso, uma biblioteca JavaScript completa não era necessária para as necessidades da Terra.

O JavaScript abaixo é aproximadamente equivalente ao código usado pelo Terra:

function prefetch(nodeLists) {
  // Exclude slow ECTs < 3g
  if (navigator.connection &&
    (navigator.connection.effectiveType === 'slow-2g'
      || navigator.connection.effectiveType === '2g')
  ) {
    return;
  }

  // Exclude low end device which is device with memory <= 2GB
  if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
    return;
  }

  const fetchLinkList = {};

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        if (!fetchLinkList[entry.target.href]) {
          fetchLinkList[entry.target.href] = true;

          fetch(entry.target, {
            priority: 'low'
          });
        }

        observer.unobserve(entry = entry.target);
      }
    });
  });
}

const idleCallback = window.requestIdleCallback || function (cb) {
  let start = Date.now();

  return setTimeout(function () {
    cb({
      didTimeout: false,
      timeRemaining: function () {
        return Math.max(0, 50 - (Date.now() - start));
      }
    });
  }, 1);
}

idleCallback(function () {
  prefetch(nodeLists)
})

• A função prefetch verifica primeiro se há uma qualidade mínima de conexão e memória do dispositivo antes de iniciar a pré-busca.
• Em seguida, ela usa um IntersectionObserver para monitorar quando os elementos ficam visíveis na janela de visualização e, em seguida, adiciona URLs a uma lista para pré-busca.
• O processo de pré-busca é programado com requestIdleCallback, com o objetivo de executar a função prefetch quando a linha de execução principal está inativa.

Conclusão

Quando usada com cuidado, a pré-busca pode reduzir significativamente os tempos de carregamento para futuras solicitações de navegação, reduzindo o atrito na jornada do usuário e aumentando o engajamento. A pré-busca resulta no carregamento de bytes extras que podem não ser usados. Por isso, a Terra tomou medidas extras para fazer a pré-busca somente em boas condições de rede e em dispositivos compatíveis, quando essas informações estiverem disponíveis.

Um agradecimento especial a Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner e Leonardo Bellini e Lucca Paradeda, da equipe de engenharia da Terra, pela contribuição para esse trabalho.