Buscar recursos para acelerar navegações futuras

Saiba mais sobre a dica de recurso rel=prefetch e como usá-la.

Demián Renzulli
Demián Renzulli
X GitHub Falha
Jeremy wagner

Pesquisas mostram que tempos de carregamento mais rápidos resultam em taxas de conversão mais altas e melhores experiências do usuário. Se você tiver insights sobre como os usuários navegam pelo seu site e quais páginas eles provavelmente vão acessar em seguida, melhore os tempos de carregamento de navegações futuras fazendo o download dos recursos dessas páginas com antecedência.

Este guia explica como fazer isso com a <link rel=prefetch>, uma dica de recurso que permite implementar a pré-busca de uma forma fácil e eficiente.

Melhorar a navegação com o rel=prefetch

Adicionar <link rel=prefetch> a uma página da Web instrui o navegador a fazer o download de páginas inteiras ou de alguns recursos, como scripts ou arquivos CSS, que o usuário pode precisar no futuro:

<link rel="prefetch" href="/articles/" as="document">

Um diagrama que mostra como a pré-busca de links funciona.

A dica prefetch consome bytes extras para recursos que não são imediatamente necessários. Por isso, essa técnica precisa ser aplicada com cuidado. Só faça a pré-busca de recursos quando tiver certeza de que os usuários vão precisar deles. Considere não fazer a pré-busca quando os usuários estiverem em conexões lentas. Detecte isso com a API Network Information.

Há maneiras diferentes de determinar quais links precisam ser pré-buscados. O mais simples é fazer a pré-busca do primeiro link ou dos primeiros links da página atual. Também há bibliotecas que usam abordagens mais sofisticadas, explicadas mais adiante nesta postagem.

Casos de uso

Pré-busca das páginas subsequentes

Faça uma pré-busca de documentos HTML quando as páginas subsequentes forem previsíveis, de modo que, quando um link é clicado, a página é carregada instantaneamente.

Por exemplo, em uma página de informações do produto, é possível fazer a pré-busca da página para o item mais procurado na lista. Em alguns casos, a próxima navegação é ainda mais fácil de prever. Em uma página de carrinho de compras, a probabilidade de um usuário visitar a página de finalização da compra geralmente é alta, o que a torna um bom candidato para pré-busca.

Embora a pré-busca de recursos use largura de banda extra, ela pode melhorar a maioria das métricas de desempenho. O Tempo para primeiro byte (TTFB, na sigla em inglês) geralmente é muito menor, porque a solicitação do documento resulta em uma ocorrência em cache. Como o TTFB será menor, as métricas subsequentes com base no tempo também serão menores, incluindo a Maior exibição de conteúdo (LCP) e a Primeira exibição de conteúdo (FCP).

Como fazer a pré-busca de recursos estáticos

Faz a pré-busca de recursos estáticos, como scripts ou folhas de estilo, quando as seções subsequentes que o usuário pode visitar podem ser previstas. Isso é muito útil quando esses recursos são compartilhados em muitas páginas.

Por exemplo, a Netflix aproveita o tempo que os usuários passam em páginas desconectadas para fazer a pré-busca do React, que será usado depois que os usuários fizerem login. Por isso, reduziu o tempo até a interação na tela em 30% nas próximas navegações.

O efeito da pré-busca de recursos estáticos nas métricas de desempenho depende do recurso que está sendo pré-buscado:

  • A pré-busca de imagens pode diminuir significativamente os tempos de LCP para elementos de imagem LCP.
  • A pré-busca de folhas de estilo pode melhorar tanto a FCP quanto a LCP, já que o tempo de rede para baixar a folha de estilo será eliminado. Como as folhas de estilo bloqueiam a renderização, elas podem reduzir a LCP durante a pré-busca. Quando o elemento da LCP da página seguinte for uma imagem de plano de fundo CSS solicitada pela propriedade background-image, a imagem também vai ser pré-buscada como um recurso dependente da folha de estilo pré-buscada.
  • A pré-busca do JavaScript permitirá que o processamento do script de pré-busca ocorra muito antes do que seria necessário buscá-lo pela rede primeiro durante a navegação. Isso pode afetar as métricas de capacidade de resposta, como Latência na primeira entrada (FID) e Interação com a próxima exibição (INP). Quando a marcação é renderizada no cliente via JavaScript, a LCP pode ser melhorada com a redução do atraso no carregamento de recursos, e a renderização da marcação com o elemento da LCP de uma página pelo cliente pode ocorrer mais cedo.
  • A pré-busca de fontes da Web que ainda não são usadas pela página atual pode eliminar mudanças de layout. Nos casos em que font-display: swap; é usado, o período de troca da fonte é eliminado, resultando na renderização mais rápida do texto e eliminando mudanças de layout. Se uma página futura usar a fonte pré-buscada e o elemento da LCP da página for um bloco de texto que usa uma fonte da Web, a LCP desse elemento também será mais rápida.

Como fazer a pré-busca de blocos JavaScript sob demanda

A divisão de código dos pacotes JavaScript permite carregar inicialmente apenas partes de um app e carregar lentamente o restante. Se você estiver usando essa técnica, poderá aplicar a pré-busca a rotas ou componentes que não são imediatamente necessários, mas que provavelmente serão solicitados em breve.

Por exemplo, se você tem uma página com um botão que abre uma caixa de diálogo com um seletor de emojis, é possível dividi-la em três partes JavaScript: página inicial, caixa de diálogo e seletor. A página inicial e a caixa de diálogo podem ser carregadas inicialmente, enquanto o seletor pode ser carregado sob demanda. Ferramentas como o webpack permitem que você instrua o navegador a pré-buscar esses blocos sob demanda.

Como implementar o rel=prefetch

A maneira mais simples de implementar prefetch é adicionar uma tag <link> ao <head> do documento:

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

O atributo as ajuda o navegador a definir os cabeçalhos corretos e a determinar se o recurso já está no cache. Exemplos de valores para esse atributo: document, script, style, font, image e outros.

Também é possível iniciar a pré-busca usando o cabeçalho HTTP Link:

Link: </css/style.css>; rel=prefetch

Um benefício de especificar uma dica de pré-busca no cabeçalho HTTP é que o navegador não precisa analisar o documento para encontrar a dica de recurso, o que pode oferecer pequenas melhorias em alguns casos.

Pré-busca de módulos JavaScript com comentários mágicos do webpack

O webpack permite a pré-busca de scripts para rotas ou funcionalidades que você tem razoavelmente certeza de que os usuários vão acessar ou usar em breve.

O snippet de código a seguir carrega lentamente uma funcionalidade de classificação da biblioteca lodash para classificar um grupo de números que será enviado por um formulário:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Em vez de esperar que o evento "submit" ocorra para carregar essa funcionalidade, você pode pré-buscar esse recurso para aumentar as chances de ele ficar disponível no cache quando o usuário enviar o formulário. O webpack permite que você use os comentários mágicos dentro de import():

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Isso instrui o webpack a injetar a tag <link rel="prefetch"> no documento HTML:

<link rel="prefetch" as="script" href="1.bundle.js">

Os benefícios de desempenho da pré-busca de blocos sob demanda são um pouco sutis, mas de um modo geral, você pode esperar respostas mais rápidas a interações que dependem desses blocos sob demanda, já que eles estarão disponíveis imediatamente. Dependendo da natureza da interação, isso poderia beneficiar o INP de uma página.

A pré-busca em geral também considera a priorização de recursos geral. Quando um recurso é pré-buscado, isso é feito com a menor prioridade possível. Assim, quaisquer recursos pré-buscados não vão competir pela largura de banda pelos recursos necessários para a página atual.

Também é possível implementar uma pré-busca mais inteligente com bibliotecas que usam prefetch em segundo plano:

Tanto o link rápido quanto o Guess.js usam a API Network Information para evitar a pré-busca se um usuário estiver em uma rede lenta ou tiver o Save-Data ativado.

Como realizar uma pré-busca em segundo plano

Dicas de recursos não são instruções obrigatórias e cabe ao navegador decidir se e quando elas devem ser executadas.

É possível usar a pré-busca várias vezes na mesma página. O navegador coloca todas as dicas na fila e solicita cada recurso quando está inativo. No Chrome, se uma pré-busca não terminar de carregar e o usuário navegar para o recurso pretendido, a carga em trânsito será selecionada como a navegação pelo navegador. Outros fornecedores de navegador podem implementar isso de maneira diferente.

A pré-busca ocorre na prioridade "Menor". Portanto, os recursos pré-buscados não competem pela largura de banda com os recursos necessários na página atual.

Os arquivos pré-buscados são armazenados no cache HTTP ou no cache de memória (dependendo se o recurso pode ser armazenado em cache ou não) por um período que varia de acordo com o navegador. Por exemplo, no Chrome, os recursos são mantidos por cinco minutos. Depois desse tempo, as regras Cache-Control normais são aplicadas.

Conclusão

O uso de prefetch pode melhorar muito os tempos de carregamento de navegações futuras e até mesmo fazer as páginas parecerem carregar instantaneamente. O prefetch é amplamente aceito em navegadores mais recentes, por isso é uma técnica interessante para melhorar a experiência de navegação de muitos usuários. Como essa técnica exige o carregamento de bytes extras que podem não ser usados, tenha cuidado ao usá-los. Faça isso apenas quando necessário e, idealmente, somente em redes rápidas.