A nova Regra de Especulação Prerender Until Script

Status da Origin Trial: Este recurso é atualmente uma Origin Trial. Para implementá-lo, você deve se registrar para um token de Origin Trial ou ativá-lo localmente via chrome://flags. Apesar de sua natureza experimental, o feedback inicial da comunidade de engenharia indica estabilidade excepcional e  melhorias de desempenho.

Prerender Until Script: O novo modo para Speculative Loading

A latência é o gargalo. Tenho dito isso há anos e continua sendo o maior problema de desempenho web. Não importa o quanto otimizemos nosso Critical Rendering Path ou reduzamos kilobytes de nossos pacotes, 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 enganar essas leis usando Speculative Loading: adivinhando para onde o usuário irá em seguida e carregando-o com antecedência. 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, 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. Carrega tudo, executa JavaScript e renderiza a página em uma guia oculta em segundo plano. É instantâneo, mas é caro. Consome largura de banda, consome memória e o pior de tudo, desencadeia "efeitos colaterais", disparando pixels de analytics e executando código para páginas que o usuário talvez nunca veja.

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

prerender_until_script.

A genialidade do prerender_until_script reside em como ele desacopla a análise da execução.Quando você utiliza esta Regra de Especulação específica, você está instruindo o navegador a:

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

No entanto, no momento em que o analisador encontra um ponto de execução JavaScript, 2 coisas podem acontecer:

• Scripts Síncronos: O analisador para imediatamente.
• Scripts Async/Defer: Eles são baixados e enfileirados, mas não executados.

O navegador constrói o "esqueleto" visual da página: O layout, a tipografia, as imagens—mas deixa a lógica da aplicação congelada. A página fica na memória, quimicamente estável, esperando o usuário clicar.

Quando o clique acontece, a página é trocada instantaneamente, e o estado "pausado" é levantado. O JavaScript executa, os manipuladores de eventos são anexados, e seu analytics dispara exatamente quando deveria.

A Implementação

Implementamos isso usando a Speculation Rules API. Porque prerender_until_script é um recurso experimental (chegando no Chrome 144), devemos garantir compatibilidade com versões anteriores.

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

Aqui está a estrutura JSON para uma implementação pronta para produção::

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

Dica: se você quiser gerar rapidamente seu próprio conjunto personalizado de regras de especulação, você pode usar o speculation rules generator

Considerações

Eagerness: Eu recomendo quase exclusivamente o moderate. Isso desencadeia a especulação ao passar o mouse (especificamente, quando o ponteiro permanece por 200ms). immediate é muito agressivo para a maioria das implementações e corre o risco de desperdiçar largura de banda do usuário em conexões móveis.

Exclusões: Você deve ser disciplinado aqui. Nunca especule em URLs que alteram estado como /logout ou /add-to-cart. Embora prerender_until_script proteja contra a execução de scripts, a boa arquitetura dita que não deveríamos sequer buscar esses endpoints desnecessariamente.

Fraqueza (Bloqueio do Analisador): O analisador para imediatamente ao encontrar uma tag <script> síncrona. Isso anula aprimoramentos como <script>loadWhileIdle(chat.js)</script> se eles aparecerem cedo no DOM. Você pode precisar refatorar o código existente para colocar esses scripts no final da página.

Manipuladores Inline: Note que prerender_until_script pausa apenas os elementos <script>. Manipuladores de eventos inline em outros elementos (por exemplo, <img onload="track()">) ainda serão executados se o analisador os alcançar antes de um script de bloqueio. Garanta que seus pixels de analytics e a lógica de rastreamento não sejam disparados por esses manipuladores inline durante a fase de especulação.