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 da página fazendo o download de recursos ou até mesmo páginas inteiras que provavelmente serão necessários em breve. Pesquisas mostram que tempos de carregamento mais rápidos resultam em taxas de conversão mais altas e em uma melhor experiência do usuário.

O Terra é um dos maiores portais de conteúdo do Brasil, com entretenimento, notícias e esportes, e mais de 63 milhões de visitantes únicos por mês. Colaboramos com a equipe de engenharia do Terra para melhorar o tempo de carregamento dos artigos usando técnicas de pré-carregamento 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) dos anúncios em dispositivos móveis, 30% na CTR dos anúncios em computadores e 50% na redução dos 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 precisa ser aplicada com cuidado para evitar o uso desnecessário de dados. No caso da Terra, os artigos serão pré-buscados se as seguintes condições forem atendidas:

• Visibilidade de links para artigos pré-carregados:a Terra usou a API Intersection Observer para detectar a visibilidade da seção que continha os artigos que ela queria pré-carregar.
• Condições favoráveis para aumentar o uso de dados:como mencionado anteriormente, a pré-busca é uma melhoria especulativa de desempenho que consome dados extras, o que pode não ser um resultado desejável em todas as situações. Para reduzir a probabilidade de desperdício de largura de banda, a Terra usa a API Network Information e a API Device Memory para determinar se precisa buscar o próximo artigo. O Terra só busca o próximo artigo quando:
  • A velocidade de conexão é de pelo menos 3G e o dispositivo tem, no mínimo, 4 GB de memória
  • ou se o dispositivo usa iOS.
• CPU inativa:por fim, o Terra verifica se a CPU está ociosa e é capaz de realizar trabalhos extras usando requestIdleCallback, que recebe 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.

Ao seguir essas condições, o Terra só vai buscar dados quando necessário, o que economiza largura de banda e duração da bateria, além de minimizar o impacto de previsões que acabam não sendo usadas.

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

Impacto nos negócios

Para medir o impacto dessa técnica, o Terra lançou o recurso pela primeira vez na seção "Conteúdo relacionado" da página do artigo. Um código de UTM ajudou a diferenciar os artigos pré-carregados dos que não foram pré-carregados para fins de comparação. Depois de duas semanas de testes A/B bem-sucedidos, a Terra decidiu adicionar a funcionalidade de pré-carregamento à seção "Recomendado para você".

Como resultado da pré-busca de artigos, observamos um aumento geral nas métricas de anúncios e uma redução nos tempos de LCP e tempo para o primeiro byte (TTFB):

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

Detalhes técnicos

A pré-busca pode ser feita usando dicas de recursos, como rel=prefetch ou rel=preload, por bibliotecas como quicklink ou Guess.js ou usando a API Speculation Rules mais recente. A Terra escolheu implementar isso usando a API fetch com uma prioridade baixa em combinação com uma instância do Intersection Observer. O Terra fez essa escolha porque permite oferecer suporte ao Safari, que ainda não oferece suporte a outros métodos de pré-carregamento, como rel=prefetch ou a API Speculation Rules, e uma biblioteca JavaScript completa não era necessária para as necessidades do 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 primeiro verifica a qualidade mínima de conexão e a memória do dispositivo antes de iniciar o pré-carregamento.
• Em seguida, ele 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é-carregamento é programado com requestIdleCallback, com o objetivo de executar a função prefetch quando a linha de execução principal estiver inativa.

Conclusão

Quando usada com cuidado, a pré-busca pode reduzir significativamente os tempos de carregamento de solicitações de navegação futuras, 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, o Terra tomou medidas extras para fazer a pré-busca apenas em boas condições de rede e em dispositivos compatíveis, onde essas informações estão disponíveis.

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