Publicado em: 23 de janeiro de 2026
O Chrome está lançando um novo teste de origem do Chrome 144 para a adição de pré-renderização até o script à API Speculation Rules. Esse teste de origem permite que os sites testem a nova adição com usuários reais. O objetivo é testar o recurso em campo e enviar feedback à equipe do Chrome para ajudar a moldá-lo e decidir se ele deve ser adicionado à plataforma da Web.
Qual problema isso busca resolver?
A API Speculation Rules permite que os carregamentos de página sejam iniciados antes que os usuários naveguem até elas. Isso pode melhorar os carregamentos de página futuros, concluindo parte ou todo o trabalho com antecedência. Até agora, ele permitia dois tipos de especulações: pré-busca e pré-renderização.
A pré-busca busca apenas o documento HTML. Isso busca o primeiro recurso crítico com antecedência, o que aumenta o desempenho quando um URL é acessado. Ele não carrega sub-recursos (por exemplo, CSS, JavaScript ou imagens) nem executa JavaScript. Portanto, ainda pode haver um trabalho considerável para o navegador realizar ao carregar as páginas.
A pré-renderização faz muito mais. Ele busca os sub-recursos e começa a renderizar a página e executar JavaScript, quase como se a página fosse aberta em uma guia oculta em segundo plano. Quando o usuário clica no link, ele pode receber uma navegação instantânea se o navegador tiver concluído todo o trabalho necessário para renderizar a página.
Usar a opção de pré-renderização pode ser muito melhor para o desempenho, mas tem um custo extra de implementação e de recursos. Se não for considerado com cuidado, isso também poderá causar efeitos colaterais inesperados ao pré-renderizar totalmente uma página antes que um usuário navegue até ela. Por exemplo, o Google Analytics pode ser acionado antes que um usuário navegue, distorcendo as estatísticas, se o provedor de análises não considerar as especulações.
Os sites que usam a pré-renderização também precisam ter cuidado para não veicular uma página desatualizada para o usuário. Por exemplo, se você especular uma página em um site de e-commerce, adicionar algo ao carrinho e carregar a página especulada anteriormente, poderá ver a quantidade antiga do carrinho se o site não tomar cuidado extra para garantir que ela seja atualizada.
Essas complicações também existem para a pré-busca se parte desse gerenciamento de estado acontecer no lado do servidor, mas geralmente é um problema maior para a pré-renderização. Pode ser mais complicado usar a pré-renderização em sites mais complexos.
No entanto, os desenvolvedores nos informaram que já estão percebendo os ganhos de performance da pré-busca da página e querem ir mais longe com as regras de especulação para se beneficiar ainda mais. É aqui que entra o pré-renderização até o script.
O que é a pré-renderização até o script?
A pré-renderização até o script é um novo meio-termo entre a pré-busca e a pré-renderização. Ele faz a pré-busca do documento HTML (como a pré-busca) e começa a renderizar a página, incluindo a busca de todos os sub-recursos (como a pré-renderização). No entanto, o navegador evita executar elementos <script> (para scripts inline e src). Quando encontra uma tag <script> de bloqueio, ele pausa o analisador e espera até que o usuário navegue até a página antes de continuar. Enquanto isso, o scanner de pré-carregamento pode continuar e buscar sub-recursos necessários para a página. Assim, eles estarão prontos para uso quando a página puder continuar sendo carregada.
Ao reter elementos de <script> de bloqueio, grande parte da complexidade da implementação é evitada. Ao mesmo tempo, ao iniciar o processo de renderização e buscar os sub-recursos, há um grande ganho em relação à pré-busca, potencialmente quase tanto quanto uma pré-renderização completa.
Na melhor das hipóteses (quando não há scripts na página), essa opção pré-renderiza a página inteira. Ou, quando uma página tem apenas elementos de script no rodapé ou apenas scripts com atributos async ou defer, ela é pré-renderizada por completo sem esse JavaScript. Mesmo no pior cenário (em que há um script de bloqueio no <head>), o início da renderização da página e, em particular, a pré-busca dos sub-recursos devem levar a um carregamento muito melhor da página.
Como usar a pré-renderização até o script?
Primeiro, ative o recurso e faça a pré-renderização até que o script seja usado da mesma forma que as outras opções da API Speculation Rules com uma nova chave prerender_until_script. Observe os sublinhados para que seja um nome de chave JSON válido.
Isso pode ser usado com regras de lista de URLs estáticos:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Também pode ser usado com regras de documentos em que os URLs a serem especulados estão disponíveis como links na página:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
A pré-renderização até o script pode ser usada com as opções normais da API Speculation Rules, incluindo os vários valores de ansiedade.
Como o JavaScript não será executado, não será possível ler document.prerendering nem o evento prerenderingchange. No entanto, o tempo activationStart será diferente de zero.
O exemplo a seguir mostra como implantar o exemplo anterior com um substituto para pré-busca em navegadores que não oferecem suporte a prerender_until_script:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
O Chrome vai processar essa duplicação sem problemas e executar a regra mais adequada para cada configuração de nível de interesse.
Como alternativa, você pode usar esses recursos com diferentes níveis de ansiedade para pré-busca e, em seguida, fazer upgrade para pré-renderização até que o script com mais indicadores seja sugerido anteriormente com pré-busca/pré-renderização:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Não é possível fazer upgrade de uma pré-renderização até o script para uma pré-renderização completa dessa maneira, mas informe se esse é um padrão que você quer que o Chrome ofereça suporte marcando este bug com uma estrela.
Todo o JavaScript está pausado?
Não, apenas elementos <script> fazem com que o analisador seja pausado. Isso significa que os manipuladores de script inline (por exemplo, onload) ou URLs javascript: não vão causar uma pausa e podem ser executados.
Por exemplo, isso pode registrar Hero image is now loaded no console antes de navegar até a página:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Por outro lado, se o listener de eventos for adicionado com um <script>, Hero image is now loaded não será registrado no console até que a página seja ativada:
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
Isso pode parecer contraditório, mas, em muitos casos (como no exemplo anterior), é melhor tomar a ação imediatamente. Adiar pode levar a complicações mais inesperadas.
Além disso, a maioria dos eventos inline exige uma ação do usuário (por exemplo, onclick, onhover) e, portanto, não será executada até que o usuário possa interagir com a página.
Por fim, os scripts de bloqueio anteriores vão pausar o analisador e, assim, impedir que os manipuladores de eventos inline sejam descobertos. Portanto, isso não vai carregar a mensagem no console até a ativação, apesar de ser um manipulador de eventos inline:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Isso é especialmente relevante para manipuladores de script inline que usam código definido anteriormente, que vai continuar funcionando como esperado:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
E os scripts com atributos async e defer?
Os scripts com atributos async e defer são adiados até a ativação, mas não impedem que o analisador continue processando o restante da página. Os scripts são baixados, mas não executados até que a página seja acessada.
Como ativar a pré-renderização até o script?
A pré-renderização até o script é uma nova opção em que estamos trabalhando e que está sujeita a mudanças. Por isso, ela não está disponível para uso sem ativação.
Ele pode ser ativado localmente para desenvolvedores com a flag do Chrome chrome://flags/#prerender-until-script ou com a flag de linha de comando --enable-features=PrerenderUntilScript.
O pré-render até o script também está disponível como um teste de origem no Chrome 144. Os testes de origem permitem que os proprietários de sites ativem um recurso nos sites deles para que usuários reais o utilizem sem precisar ativá-lo manualmente. Isso permite medir o impacto do recurso em usuários reais para garantir que ele funcione como esperado.
Faça um teste e compartilhe seu feedback
Estamos muito animados com essa adição proposta à API Speculation Rules e incentivamos os proprietários de sites a testá-la.
Compartilhe seu feedback sobre a proposta no repositório do GitHub. Para enviar feedback sobre a implementação do Chrome, informe um bug do Chromium.