Prerender Until Script: O Meio-Termo Entre Prefetch e Prerender

Origin Trial: prerender_until_script está disponível como um Origin Trial no Chrome 144 a 150. Você precisa registrar-se para obter um token ou ativá-lo localmente via chrome://flags/#prerender-until-script. Nenhuma Intenção de Lançamento (Intent to Ship) foi registrada ainda.

Última revisão por Arjen Karel em março de 2026

Prerender Until Script: O Novo Modo para Carregamento Especulativo

Latência é o gargalo. Tenho dito isso há anos, e continua sendo o maior problema de desempenho na web. Não importa o quanto otimizemos nosso Caminho Crítico de Renderização ou cortemos kilobytes de nossos bundles, estamos, em última análise, limitados pelas leis da física e pelo tempo de ida e volta (RTT) da rede.

Por muito tempo, tentamos burlar essas leis usando o Carregamento Especulativo: adivinhando para onde o usuário irá a seguir e carregando isso antecipadamente. Até agora, tínhamos duas ferramentas principais, e nenhuma era perfeita:

• prefetch: Seguro e leve, mas busca apenas o HTML. O navegador ainda precisa analisar (parse), construir o DOM e descobrir sub-recursos (CSS, imagens) após o clique do usuário. Isso resolve a espera da rede, mas não o trabalho de renderização.
• prerender: A opção nuclear. Ele carrega tudo, executa JavaScript e renderiza a página em uma aba oculta em segundo plano. É instantâneo, mas é caro. Consome largura de banda, consome memória, dispara pixels de analytics e executa código para páginas que o usuário talvez nunca veja.

Precisávamos de um meio-termo. A prontidão visual de um prerender sem o custo e o risco de executar a lógica da aplicação.

Como o prerender_until_script funciona

O prerender_until_script separa a análise (parsing) da execução. Quando você usa esta Regra de Especulação (Speculation Rule), você instrui o navegador a:

• Buscar o documento (como um prefetch).
• Analisar (parse) o fluxo de HTML e construir o DOM.
• Executar o Preload Scanner. Esta é a parte crítica. O navegador descobre e faz o download de sub-recursos, como CSS de alta prioridade e a imagem de LCP.

No momento em que o analisador (parser) encontra um ponto de execução de JavaScript, duas coisas podem acontecer:

• Scripts síncronos: O analisador é interrompido imediatamente.
• Scripts async/defer: Eles são baixados e colocados na fila, mas não são executados.

O navegador constrói a casca visual da página: o layout, a tipografia, as imagens. Mas a lógica da aplicação permanece congelada. A página fica na memória, com o layout totalmente montado, esperando o usuário clicar.

Quando o clique acontece, a página é trocada (swapped in) instantaneamente. O JavaScript é executado, os manipuladores de eventos (event handlers) são anexados e seu analytics é disparado exatamente quando deveria.

Prefetch vs prerender_until_script vs prerender

* Um prerender completo pode proteger contra analytics prematuros usando document.prerendering, mas você mesmo precisa adicionar esse código.

É por isso que o prerender_until_script é importante. Você obtém o carregamento de sub-recursos e a construção do DOM de um prerender completo, mas sem a poluição de analytics e o custo de memória de executar JavaScript. Para sites de conteúdo com scripts pesados de terceiros, este é o ponto ideal.

A Implementação

Nós implementamos isso usando a Speculation Rules API. Como o prerender_until_script é experimental (Origin Trial, Chrome 144 a 150), você precisa de compatibilidade com versões anteriores (backward compatibility).

Navegadores que não reconhecem a chave prerender_until_script irão ignorá-la. Adicione um fallback de prefetch para o mesmo conjunto de URLs. O Chrome irá desduplicar essas regras e aplicar a ação mais capaz disponível.

<script type="speculationrules">
{
  "prerender_until_script": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart" } }
        ]
      },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

O bloco prefetch é o fallback. Em navegadores que suportam prerender_until_script, o Chrome escolhe a ação mais capaz automaticamente. Em navegadores que não suportam, a regra de prefetch ainda é executada. Você obtém o melhor comportamento disponível sem fazer verificação de user-agent (user-agent sniffing).

Se você quiser gerar seu próprio conjunto personalizado de regras de especulação, use o gerador de regras de especulação (speculation rules generator).

Como ativar o prerender_until_script

Como este é um Origin Trial, você tem duas opções:

1. Registre-se para obter um token de Origin Trial no painel de Origin Trials do Chrome. Adicione o token como uma tag <meta> no seu <head>: <meta http-equiv="origin-trial" content="YOUR_TOKEN">
2. Teste localmente navegando até chrome://flags/#prerender-until-script e ativando a flag.

O Origin Trial vai do Chrome 144 (janeiro de 2026) até o Chrome 150 (aproximadamente meados de 2026). Se a equipe do Chrome lançá-lo como um recurso estável depois disso, o token não será mais necessário. O post oficial no blog do Chrome cobre todos os detalhes.

Desempenho das regras de especulação no mundo real

Ninguém publicou benchmarks do prerender_until_script ainda (é muito novo). Mas a Speculation Rules API mais ampla possui dados concretos de grandes implementações:

• A Ray-Ban implementou regras de especulação com prerender e viu uma melhoria de 43% na LCP em dispositivos móveis (de 4.69s para 2.66s). As taxas de conversão dobraram.
• A Shopify lançou regras de especulação com prefetch em todas as lojas Liquid e mediu uma velocidade 130ms maior no desktop e 180ms maior no mobile em todas as métricas de carregamento.
• O Cloudflare Speed Brain usa regras de especulação com um modelo de previsão de ML e relata uma redução de 45% na LCP em prefetches bem-sucedidos.

A adoção está crescendo rápido. De acordo com o Web Almanac de 2025, 35% dos sites para dispositivos móveis agora usam a Speculation Rules API. A maior parte desse crescimento vem do WordPress 6.8, que integrou regras de especulação em seu núcleo (core) em março de 2025.

O prerender_until_script deve entregar resultados entre um prefetch e um prerender completo. Os sub-recursos já estão em cache e o DOM está construído. O único trabalho restante na ativação é a execução do script. Em sites monitorados pelo CoreDash, eu normalmente vejo regras de especulação reduzirem a LCP da navegação subsequente de 30% a 50%.

Considerações

Eagerness (Ansiedade/Agressividade): Eu recomendo quase exclusivamente o moderate. Isso aciona a especulação ao passar o mouse (quando o ponteiro permanece por 200ms). O immediate é agressivo demais para a maioria dos sites e corre o risco de desperdiçar largura de banda em conexões móveis.

Exclusões: Seja disciplinado aqui. Nunca especule em URLs que alteram o estado, como /logout ou /add-to-cart. Embora o prerender_until_script proteja contra a execução de scripts, você nem deveria buscar esses endpoints desnecessariamente.

Bloqueio do analisador (Parser blocking): O analisador é interrompido imediatamente ao encontrar uma tag <script> síncrona. Se você tiver scripts inline no início do DOM (por exemplo, <script>loadWhileIdle(chat.js)</script>), o prerender vai parar aí. Mova os scripts para o final da página ou use defer para maximizar a quantidade de DOM que é pré-construída.

Manipuladores inline (Inline handlers): O prerender_until_script pausa apenas elementos <script>. Manipuladores de eventos inline em outros elementos (como <img onload="track()">) ainda serão executados se o analisador alcançá-los antes de um script de bloqueio. Certifique-se de que seu analytics e rastreamento não sejam acionados por manipuladores inline.

Você pode depurar regras de especulação no Chrome DevTools, no painel Application. O painel Network do Chrome DevTools também mostrará buscas especulativas com um ícone distinto. Use Real User Monitoring para verificar o impacto real na INP e LCP após a implantação de regras de especulação em produção.