💧 Resource Prioritization é um conjunto de técnicas que nos permite controlar como o browser processa os recursos das nossas páginas web — quando baixar, quando conectar, quando renderizar — em vez de deixar tudo na heurística padrão do browser.

🤯 Sem essas técnicas, o browser decide sozinho a ordem de prioridade dos recursos, o que costuma gerar problemas de performance e renderização porque ele não sabe o que é crítico para sua aplicação.

A seguir, as quatro diretivas principais.

preconnect

Antecipa o handshake (DNS, TLS e TCP) com origens externas que sua página vai consultar em breve, eliminando esse custo no momento da requisição real.

<link rel="preconnect" href="https://cdn.exemplo.com" />

👉 Use para CDNs, APIs de terceiros, fontes hospedadas em outro domínio, e origens que serão acessadas via interação do usuário em breve.

⚠️ Cada preconnect consome recursos de rede. Use com moderação — limite a 4-6 origens críticas.

prefetch

Diz ao browser para baixar recursos de baixa prioridade durante janelas ociosas, sem competir com o carregamento crítico da página.

<link
  rel="prefetch"
  as="font"
  type="font/woff2"
  href="icones-dropdown.woff2"
/>

😋 Útil para recursos que você sabe que serão usados em breve — fonte que aparece após interação, imagem da próxima página de um carrossel, etc.

preload

Força o browser a baixar recursos com alta prioridade, antes de qualquer outro. É o oposto do prefetch.

<link rel="preload" href="critical.css" as="style" />
<link rel="preload" href="hero-font.woff2" as="font" type="font/woff2" crossorigin />

👨‍💻 Recomendado para recursos bloqueantes ou críticos para o layout inicial — CSS crítico, fontes do above-the-fold, scripts essenciais para a primeira interação.

⚠️ Abuse de preload e você quebra a priorização do browser. Reserve para o que é realmente crítico.

prerender (via Speculation Rules API)

Pré-carrega páginas inteiras no cache, deixando a próxima navegação praticamente instantânea.

A forma moderna é via Speculation Rules API, que permite declarar regras em JSON com controle de agressividade (immediate, eager, moderate, conservative):

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

🆕 É literalmente como carregar essas URLs em abas virtuais — quando o usuário navega pra elas, a página aparece instantaneamente.

⚠️ Páginas pré-renderizadas executam scripts (incluindo analytics e side effects). Use document.prerendering e o evento prerenderingchange para suspender efeitos colaterais até a ativação real:

if (document.prerendering) {
  document.addEventListener("prerenderingchange", () => {
    // página ativada de verdade — agora pode disparar analytics, etc.
  }, { once: true });
}

🚨 EVITE prerender em telas pouco utilizadas — você paga banda e CPU por algo que não vai ser visto.

Quando usar qual?

DiretivaPara o quêQuando usar
preconnectEstabelecer conexão antecipada com uma origemOrigens externas críticas (CDN, API de terceiros)
prefetchBaixar recurso em prioridade baixaRecursos prováveis na próxima navegação ou interação
preloadBaixar recurso em prioridade altaRecursos críticos do layout inicial
Speculation Rules (prerender)Pré-carregar página inteiraPáginas com altíssima probabilidade de navegação

Suporte

📊 preconnect, prefetch e preload têm suporte amplo em todos os browsers modernos. Speculation Rules está disponível em Chrome 109+ e Edge — outros browsers ainda não implementam, mas ignoram a regra silenciosamente, então é seguro usar como progressive enhancement.

👉 Não adotar Resource Prioritization dá ao browser a responsabilidade total de priorização — e ele não sabe o que é importante para sua aplicação. Adote.

LoFM.