A pré-busca de recursos acelera o tempo de carregamento da página e melhora as métricas de negócios.
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.
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):
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çãoprefetch
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.