Gerador de link rel=prefetch

link rel="prefetch": avisando o navegador o que vem a seguir

A tag <link rel="prefetch"> é uma dica de baixa prioridade dizendo que o navegador pode baixar um recurso antecipadamente porque é provável que o usuário navegue até ele em seguida. Diferente do preload, que aquece recursos críticos da página atual, o prefetch fala sobre navegações futuras: a página seguinte de uma listagem paginada, a página de detalhe do produto com maior probabilidade de clique, o próximo passo de um checkout. O fetch acontece em prioridade idle e o resultado para no cache HTTP, então quando o usuário finalmente clica, a página boota do disco em milissegundos.

<link rel="prefetch" href="/checkout">
<link rel="prefetch" href="/produtos/2" as="document">
<link rel="prefetch" href="/api/produtos.json" as="fetch" crossorigin>
<link rel="prefetch" href="/img/hero-passo-2.webp" as="image">

Prefetch vs preload vs preconnect vs dns-prefetch

As quatro diretivas são rotineiramente confundidas. dns-prefetch resolve um hostname; preconnect abre uma conexão TCP+TLS completa sem mandar requisição; preload baixa um recurso que a página atual certamente vai usar (fontes, hero image, CSS crítico) em alta prioridade; prefetch baixa um recurso que uma navegação futura provavelmente vai precisar, em baixa prioridade. Trocar isso desperdiça banda ou piora performance: pré-carregar uma imagem usada três páginas depois, por exemplo, rouba prioridade do elemento LCP da página atual.

Prefetch no hover: instant.page e Quicklink

O instant.page é uma biblioteca pequena (~1 KB) que escuta o movimento do mouse e começa a prefetchar o link em que o usuário vai clicar cerca de 65 ms antes do evento click. Usuários percebem 65 ms a menos no clique consistentemente — é a diferença entre "rápido" e "instantâneo". O Quicklink, do Chrome Labs do Google, adota outra abordagem: observa o viewport com a Intersection Observer API e prefetcha todo link que entra em visibilidade, respeitando navigator.connection.saveData, effectiveType e uma lista configurável de permitidos/negados.

<script src="//instant.page/5.2.0" type="module"
        integrity="sha384-..."></script>

<!-- Quicklink -->
<script type="module">
  import { listen } from 'https://cdn.jsdelivr.net/npm/quicklink/dist/quicklink.mjs';
  listen({ ignores: [/\/logout/, /\/admin/] });
</script>

103 Early Hints e a Speculation Rules API

A evolução mais recente dos resource hints vive no servidor. Com 103 Early Hints, o servidor manda uma resposta parcial carregando cabeçalhos Link: </style.css>; rel=preload antes do 200 OK final, deixando o navegador começar a buscar assets críticos enquanto o backend ainda renderiza. Cloudflare e Fastly suportam nativamente. A Speculation Rules API (Chrome 109+) vai além: um bloco JSON na página descreve estratégias de prefetch e até prerender completo de forma declarativa, com condições do tipo "links que casem com /produtos/* no hover".

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/produtos/*" }, "eagerness": "moderate" }
  ],
  "prefetch": [
    { "where": { "href_matches": "/blog/*" }, "eagerness": "conservative" }
  ]
}
</script>

Quando o prefetch atrapalha

• Bundles SPA pesados: prefetchar 500 KB de JavaScript para uma rota que o usuário nunca visita desperdiça banda e bateria — especialmente em planos móveis tarifados.
• Ruído em analytics: contadores no servidor disparam no prefetch como se a página tivesse sido vista. Marque requisições prefetched com Sec-Purpose: prefetch e filtre na sua ferramenta.
• Endpoints autenticados: prefetchar /logout em alguns setups desloga o usuário antes de ele querer sair. Sempre exclua rotas destrutivas.
• Save-Data e redes lentas: cheque navigator.connection e pule prefetch quando saveData for true ou effectiveType for 2g/slow-2g.

Perguntas frequentes

Qual a diferença entre prefetch e preload? Preload é para a página atual (alta prioridade, crítico), prefetch é para uma navegação futura (baixa prioridade, opcional). Usar o errado destrói a pontuação de performance no Lighthouse.

Quanta banda o prefetch consome? Tipicamente 50–150 KB por página prefetched num site estático, muito mais em SPAs pesadas. Defina um orçamento — 5 a 10 URLs prefetched é um teto razoável para a maioria das páginas.

Prefetch funciona em cross-origin? Sim para documentos, mas recursos cross-origin fetched precisam do atributo crossorigin e cabeçalhos CORS adequados, ou o navegador vai baixar de novo na navegação real, desperdiçando os dois round trips.

HTTP/2 server push ainda é opção? Não. O Chrome removeu suporte em 2022 porque o servidor não consegue saber o que já está no cache do cliente, levando a pushes desperdiçados. 103 Early Hints substituiu como caminho recomendado.