Buscar recursos para acelerar navegações futuras

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

Demián Renzulli

Jeremy Wagner

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. Se você tiver informações sobre como os usuários navegam pelo seu site e quais páginas eles provavelmente vão visitar em seguida, poderá melhorar 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 <link rel=prefetch>, uma dica de recurso que permite implementar o pré-carregamento de uma maneira fácil e eficiente.

Melhorar a navegação com rel=prefetch

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

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

A dica prefetch consome bytes extras para recursos que não são necessários imediatamente. Portanto, essa técnica precisa ser aplicada com cuidado. Faça o precarregamento de recursos apenas quando tiver certeza de que os usuários vão precisar deles. Considere não fazer a busca antecipada quando os usuários estiverem em conexões lentas. Você pode detectar isso com a API Network Information.

Há maneiras diferentes de determinar quais links serão pré-carregados. A mais simples é fazer o pré-carregamento do primeiro link ou dos primeiros links na página atual. Há também bibliotecas que usam abordagens mais sofisticadas, explicadas mais adiante nesta postagem.

Casos de uso

Pré-buscar páginas subsequentes

Faça o pré-carregamento de documentos HTML quando as páginas subsequentes forem previsíveis. Assim, quando um link for clicado, a página será carregada instantaneamente.

Por exemplo, em uma página de informações do produto, você pode fazer o pré-carregamento da página do produto mais popular da lista. Em alguns casos, a próxima navegação é ainda mais fácil de prever. Na página do carrinho de compras, a probabilidade de um usuário acessar a página de finalização de compra geralmente é alta, o que a torna um bom candidato para pré-carregamento.

Embora a pré-busca de recursos use mais largura de banda, ela pode melhorar a maioria das métricas de performance. O tempo para o primeiro byte (TTFB) geralmente será muito menor, já que a solicitação do documento resulta em um hit de cache. Como o TTFB será menor, as métricas baseadas em tempo também serão menores, incluindo Largest Contentful Paint (LCP) e First Contentful Paint (FCP).

Pré-buscar recursos estáticos

Faça o pré-carregamento de recursos estáticos, como scripts ou folhas de estilo, quando as seções subsequentes que o usuário pode visitar puderem ser previstas. Isso é especialmente útil quando esses recursos são compartilhados em várias páginas.

Por exemplo, a Netflix aproveita o tempo que os usuários passam nas páginas de deslogagem para fazer o precarregamento do React, que será usado quando os usuários fizerem login. Com isso, eles reduziram o tempo para interação da página em 30% para navegações futuras.

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

• O pré-carregamento de imagens pode reduzir significativamente os tempos de LCP para elementos de imagem de LCP.
• A pré-busca de folhas de estilo pode melhorar a FCP e a LCP, já que o tempo de rede para fazer o download da folha de estilo será eliminado. Como as folhas de estilo bloqueiam a renderização, elas podem reduzir a LCP quando pré-buscadas. Nos casos em que o elemento LCP da página subsequente é uma imagem de plano de fundo do CSS solicitada pela propriedade background-image, a imagem também será pré-buscada como um recurso dependente da folha de estilos pré-buscada.
• A busca antecipada do JavaScript permite que o processamento do script pré-buscado ocorra muito mais cedo do que se ele precisasse ser buscado pela rede primeiro durante a navegação. Isso pode afetar a Interaction to Next Paint (INP) de uma página. Nos casos em que a marcação é renderizada no cliente por JavaScript, a LCP pode ser melhorada com a redução dos atrasos no carregamento de recursos, e a renderização do lado do cliente da marcação que contém o elemento LCP de uma página pode ocorrer mais cedo.
• O pré-carregamento de fontes da Web que ainda não são usadas pela página atual pode eliminar as mudanças de layout. Nos casos em que font-display: swap; é usado, o período de troca da fonte é eliminado, resultando em uma renderização mais rápida do texto e na eliminação de mudanças de layout. Se uma página futura usar a fonte pré-buscada e o elemento LCP da página for um bloco de texto usando uma fonte da Web, o LCP desse elemento também será mais rápido.

Pré-buscar blocos JavaScript sob demanda

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

Por exemplo, se você tiver uma página que contém um botão que abre uma caixa de diálogo que contém um seletor de emoji, é possível dividi-la em três partes do JavaScript: início, diálogo e seletor. A tela 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 fazer o pré-carregamento desses blocos sob demanda.

Como implementar 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 determinar se o recurso já está no cache. Exemplos de valores para esse atributo incluem: document, script, style, font, image e outros.

Também é possível iniciar o pré-carregamento pelo cabeçalho HTTP Link:

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

Um benefício de especificar uma dica de pré-carregamento 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é-buscar módulos JavaScript com comentários mágicos do webpack

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

O snippet de código abaixo carrega de forma lenta uma funcionalidade de classificação da biblioteca lodash para classificar um grupo de números que serão enviados 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 de "envio" ocorra para carregar essa funcionalidade, você pode fazer o pré-carregamento desse recurso para aumentar as chances de ele estar disponível no cache no momento em que o usuário envia o formulário. O webpack permite isso usando 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 informa ao webpack para 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 modo geral, você pode esperar respostas mais rápidas para interações que dependem desses blocos, já que eles estão disponíveis imediatamente. Dependendo da natureza da interação, isso pode beneficiar o INP de uma página.

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

Pré-carregamento inteligente com quicklink e Guess.js

Também é possível implementar um pré-carregamento mais inteligente com bibliotecas que usam prefetch:

• O quicklink usa a API Intersection Observer para detectar quando os links entram na viewport e faz o pré-carregamento de recursos vinculados durante o tempo inativo. Bônus: o link rápido pesa menos de 1 KB.
• O Guess.js usa relatórios de análise para criar um modelo preditivo que é usado para pré-carregar de forma inteligente apenas o que o usuário provavelmente vai precisar.

Tanto o quicklink 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 a Save-Data ativada.

Pré-busca em segundo plano

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

É possível usar o pré-carregamento várias vezes na mesma página. O navegador enfileira todas as dicas e solicita cada recurso quando está inativo. No Chrome, se um pré-carregamento não terminar de carregar e o usuário navegar até o recurso de pré-carregamento destinado, o carregamento em andamento será escolhido como a navegação pelo navegador. Outros fornecedores de navegador podem implementar isso de maneira diferente.

A pré-busca ocorre com a prioridade mais baixa, para que os recursos pré-buscados não compitam pela largura de banda com os recursos necessários na página atual.

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

Conclusão

O uso de prefetch pode melhorar muito os tempos de carregamento de navegações futuras e até fazer com que as páginas pareçam carregar instantaneamente. O prefetch tem amplo suporte em navegadores modernos, o que o torna uma técnica atraente para melhorar a experiência de navegação de muitos usuários. Essa técnica exige o carregamento de bytes extras que podem não ser usados. Portanto, use essa técnica apenas quando necessário e, de preferência, apenas em redes rápidas.