Tipos de Prefetch

Resource Hints

Técnicas essenciais de otimização de performance para carregar recursos antecipadamente. Parte dos estudos de performance frontend.

O que são Resource Hints?

Resource hints (dicas de recurso) são instruções dadas ao navegador para otimizar o carregamento de uma página. Elas permitem que o navegador inicie conexões ou baixe recursos antes mesmo que eles sejam estritamente necessários, reduzindo o tempo de carregamento percebido pelo usuário.

Principais Tipos

1. DNS-Prefetch (<link rel="dns-prefetch">)

Resolve o domínio de um recurso antes que uma requisição seja feita.

• Como funciona: O navegador realiza o DNS lookup (tradução de domínio para IP) em background.
• Quando usar: Para domínios de terceiros (ex: Google Fonts, Analytics, CDNs) onde você sabe que fará requisições logo, mas não sabe exatamente qual arquivo.
• Exemplo:

  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />

2. Preconnect (<link rel="preconnect">)

Vai além do dns-prefetch: além de resolver o DNS, já negocia a conexão TCP e o handshake TLS.

• Como funciona: Estabelece a conexão completa com o servidor alvo, economizando o tempo de setup da conexão na hora de baixar o recurso.
• Quando usar: Para domínios críticos que serão acessados imediatamente (ex: o domínio da sua API principal ou CDN de imagens).
• ⚠️ Armadilha: Não abuse. Conexões abertas e não utilizadas desperdiçam recursos do cliente e do servidor. Use no máximo para 3 ou 4 domínios críticos.
• Exemplo:

  <link rel="preconnect" href="https://api.meusite.com" crossorigin />

3. Prefetch (<link rel="prefetch">)

Baixa e armazena em cache um recurso que provavelmente será usado na próxima navegação.

• Como funciona: O navegador faz o download do arquivo com baixa prioridade, sem interromper o carregamento da página atual.
• Quando usar: Quando você tem certeza (ou alta probabilidade) de que o usuário irá para uma página específica em seguida (ex: a próxima página de um tutorial ou os assets da rota após o login).
• Exemplo:

  <link rel="prefetch" href="/js/dashboard.bundle.js" />

4. Prerender (<link rel="prerender">)

A técnica mais agressiva: baixa a página inteira e renderiza em background (invisível).

• Como funciona: O navegador constrói a página inteira, rodando scripts e montando o DOM. Quando o usuário clica no link, a exibição é instantânea.
• Quando usar: Quando há altíssima probabilidade de o usuário clicar em um link específico.
• ⚠️ Armadilha: Custa muita banda e processamento (CPU/Memória). Se o usuário não clicar, todo esse trabalho é jogado fora.
• Exemplo:

  <link rel="prerender" href="/proxima-pagina" />

5. Preload (<link rel="preload">) (Bônus)

Embora não seja um “prefetch” no sentido de navegação futura, é vital para a página atual.

• Como funciona: Força o navegador a baixar um recurso crítico o mais rápido possível, com alta prioridade.
• Quando usar: Para fontes web customizadas, imagens de hero, ou CSS/JS essenciais para o First Contentful Paint (FCP). Requer o atributo as.
• Exemplo:

  <link
    rel="preload"
    href="/fonts/minha-fonte.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />

Resumo Rápido

Relacionadas: react-performance · react-code-splitting · seo-on-page.