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
Guilherme Moser de Souza

A pré-busca é uma técnica usada para acelerar o carregamento de páginas fazendo o download de recursos ou até mesmo de 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 existe há algum tempo, mas é importante usá-la com cuidado, porque ela consome largura de banda extra 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 do Terra, os artigos são pré-carregados 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, o Terra usa a API Network Information com a API Device Memory para determinar se o próximo artigo será buscado. O Terra só vai buscar 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 está executando o iOS.
  • CPU ociosa:por fim, o Terra verifica se a CPU está ociosa e pode realizar um trabalho extra usando requestIdleCallback, que leva um callback para ser processado quando a linha de execução principal está ociosa ou por um prazo (opcional) específico, o que ocorrer primeiro.

Ao aderir a essas condições, o Terra só vai buscar dados quando necessário, o que economiza largura de banda e duração da bateria e minimiza o impacto de previsões que não são 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.

Uma captura de tela das duas seções no site da Terra em que os links foram pré-buscados. À esquerda, a seção "Conteúdo relacionado" está destacada, enquanto à direita, a seção "Recomendado para você" está destacada.

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 do carregamento antecipado de artigos, observamos um aumento geral das métricas de anúncios e uma redução do LCP e do tempo inicial de carregamento (TTFB):

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

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 optou por 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é-carregamento.
  • 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 a fricção 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.