# Resource Prioritization

> Drop sobre Resource Prioritization na web — preconnect, prefetch, preload e prerender — com exemplos práticos e a abordagem moderna via Speculation Rules API.

- Canonical: https://betomuniz.com/blog/resource-prioritization
- Published: 2020-07-28
- Updated: 2026-04-21T17:44:00.000Z
- Language: pt
- Tags: Performance

---

**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.

```html
<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.

```html
<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`.

```html
<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**](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API), que permite declarar regras em JSON com controle de agressividade (`immediate`, `eager`, `moderate`, `conservative`):

```html
<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:

```javascript
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?

| Diretiva                        | Para o quê                                    | Quando usar                                          |
| ------------------------------- | --------------------------------------------- | ---------------------------------------------------- |
| `preconnect`                    | Estabelecer conexão antecipada com uma origem | Origens externas críticas (CDN, API de terceiros)    |
| `prefetch`                      | Baixar recurso em prioridade baixa            | Recursos prováveis na próxima navegação ou interação |
| `preload`                       | Baixar recurso em prioridade alta             | Recursos críticos do layout inicial                  |
| Speculation Rules (`prerender`) | Pré-carregar página inteira                   | Pá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.