Speculation Rules API: Navegação Instantânea com Prerendering

Prefetch e prerender de páginas sempre existiram na web, mas de forma limitada: <link rel="prefetch"> só baixa o recurso, sem renderizar nada, e o antigo rel="prerender" foi removido dos navegadores por causar problemas de desempenho e privacidade. A Speculation Rules API substitui os dois com um mecanismo declarativo, baseado em JSON, que deixa o navegador decidir quando vale a pena buscar ou até renderizar antecipadamente a próxima página que o usuário provavelmente vai visitar.

Como funciona

As regras vivem dentro de um <script type="speculationrules">, com um objeto JSON descrevendo quais URLs especular e com qual estratégia:

<script type="speculationrules">
{
    "prefetch": [{
        "urls": ["/produtos/123", "/produtos/456"]
    }]
}
</script>

Com isso, o navegador baixa o HTML dessas duas URLs em segundo plano. Se o usuário clicar em um desses links, a navegação usa o conteúdo já baixado em vez de fazer uma nova requisição — a diferença aparece como um carregamento bem mais rápido, sem nenhum JavaScript de aplicação envolvido.

Prerender: ir além do prefetch

Trocando prefetch por prerender, o navegador não só baixa o HTML como também executa toda a página numa aba invisível — CSS aplicado, JavaScript rodando, imagens carregando. Quando o usuário navega, a troca é praticamente instantânea, porque a página já estava pronta:

<script type="speculationrules">
{
    "prerender": [{
        "urls": ["/checkout"]
    }]
}
</script>

Por ser mais custoso, o prerender é indicado para navegações de alta confiança, como o próximo passo óbvio de um fluxo (carrinho → checkout), e não para qualquer link da página.

Regras baseadas em documento com where

Listar URLs uma a uma não escala. A chave where aplica a regra a qualquer link que bata com um seletor CSS ou um padrão de URL, sem precisar atualizar o script a cada página nova:

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

Aqui, qualquer link cujo href combine com /blog/* vira candidato a prefetch automaticamente — inclusive links adicionados dinamicamente depois do carregamento inicial da página.

Controlando o gatilho com eagerness

A chave eagerness decide o quão "ansioso" o navegador deve ser antes de especular, balanceando velocidade contra desperdício de banda:

"immediate" — dispara assim que a regra é processada, sem esperar nenhuma interação.
"eager" — dispara ao passar o mouse ou focar o link, com um pequeno atraso.
"moderate" — dispara depois de um hover mais sustentado (cerca de 200ms) ou no pointerdown, um bom equilíbrio para a maioria dos casos.
"conservative" — só dispara no pointerdown/touchstart, ou seja, no exato instante em que o clique começa.

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

Detectando uma página prerenderizada

Como o JavaScript da página roda de verdade durante o prerender, código com efeitos colaterais (disparo de analytics, contagem de visualização) pode executar antes de o usuário realmente ver a página. A propriedade document.prerendering e o evento prerenderingchange permitem adiar esse tipo de lógica:

function registrarVisualizacao() {
    enviarAnalytics('page_view');
}

if (document.prerendering) {
    document.addEventListener('prerenderingchange', registrarVisualizacao, { once: true });
} else {
    registrarVisualizacao();
}

Quando usar

Sites com múltiplas páginas (MPAs) onde a próxima navegação é previsível: listagem → produto, carrinho → checkout, índice → artigo.
Blogs e sites de notícias, aplicando prefetch com where a links de listagem para acelerar a leitura sequencial.
Fluxos críticos de conversão (checkout, login) onde vale a pena pagar o custo maior do prerender em troca de uma transição instantânea.

Cuidados

O navegador pode ignorar qualquer regra de especulação por conta própria — memória insuficiente, modo de economia de dados ou apenas por decisão interna de custo/benefício. As regras são uma sugestão, não uma garantia. Por padrão, a especulação só funciona para navegações same-origin; alvos cross-origin exigem cabeçalhos adicionais de opt-in no servidor de destino. E como o prerender executa JavaScript de verdade, formulários, temporizadores e qualquer coisa com efeito colateral precisam considerar o estado "página ainda não visível" antes de disparar.

Compatibilidade

Suporte hoje é restrito a navegadores baseados em Chromium (Chrome e Edge); Firefox e Safari ainda não implementam a API. Por ser uma otimização progressiva — o navegador que não suporta simplesmente ignora o <script type="speculationrules"> —, é seguro adicionar as regras sem nenhum fallback especial.

caniuse

Conclusão

A Speculation Rules API tira do desenvolvedor a complexidade de escrever heurísticas manuais de prefetch e devolve isso ao navegador, que tem informação melhor sobre memória, rede e comportamento do usuário para decidir quando especular. Para sites com fluxos de navegação previsíveis, é uma das formas mais simples de ganhar desempenho percebido sem tocar em uma linha de CSS ou refatorar a aplicação.