Speculation rules prerender until script origin trial

Data di pubblicazione: 23 gennaio 2026

A partire da Chrome 144, Chrome lancerà una nuova prova dell'origine per l'prerender until script all'API Speculation Rules. Questa prova dell'origine consente ai siti di provare la nuova aggiunta con utenti reali. L'obiettivo è testare sul campo la funzionalità e fornire al team di Chrome un feedback per aiutarlo a definirla e decidere se aggiungerla alla piattaforma web.

Quale problema si intende risolvere?

L'API Speculation Rules consente di avviare il caricamento delle pagine prima che gli utenti accedano effettivamente alle pagine. In questo modo è possibile migliorare i caricamenti delle pagine futuri completando in anticipo una parte o tutto il lavoro. Finora, l'API ha consentito due tipi di speculazioni: prefetch e prerender.

Prefetch recupera solo il documento HTML. In questo modo, la prima risorsa critica viene recuperata in anticipo, il che migliora le prestazioni quando si accede a un URL. Non carica le risorse secondarie (ad esempio CSS, JavaScript o immagini) né esegue JavaScript, pertanto il browser potrebbe dover eseguire ancora un lavoro considerevole durante il caricamento delle pagine.

Prerender fa molto di più. Recupera le risorse secondarie e inizia a eseguire il rendering della pagina e a eseguire JavaScript, quasi come se la pagina fosse stata aperta in una scheda in background nascosta. Quando l'utente fa clic sul link, può ottenere una navigazione istantanea se il browser ha completato tutto il lavoro necessario per eseguire il rendering della pagina.

L'utilizzo dell'opzione prerender è potenzialmente molto migliore per le prestazioni, ma comporta costi di implementazione aggiuntivi, nonché costi di risorse aggiuntivi. Se non viene considerato attentamente, può anche causare effetti collaterali imprevisti quando viene eseguito il prerendering completo di una pagina prima che un utente acceda effettivamente alla pagina. Ad esempio, se il fornitore di analisi non tiene conto delle speculazioni, le analisi potrebbero essere attivate prima che un utente acceda, falsando le statistiche.

I siti che utilizzano prerender devono anche fare attenzione a non mostrare agli utenti una pagina obsoleta. Ad esempio, se esegui la speculazione di una pagina su un sito di e-commerce, aggiungi qualcosa al carrello e poi carichi la pagina di cui hai eseguito la speculazione in precedenza, potresti visualizzare la quantità precedente del carrello se il sito non presta particolare attenzione ad assicurarsi che venga aggiornata.

Queste complicazioni esistono anche per prefetch se parte di questa gestione dello stato avviene lato server, ma spesso è un problema più grande per prerender. Può essere più complicato utilizzare prerender su siti più complessi.

Tuttavia, gli sviluppatori ci dicono che stanno già riscontrando miglioramenti delle prestazioni grazie al prefetch della pagina e vogliono andare oltre con le regole di speculazione per ottenere ancora più vantaggi. È qui che entra in gioco prerender until script.

Che cos'è prerender until script?

prerender until script è una nuova via di mezzo tra prefetch e prerender. Recupera in anticipo il documento HTML (come fa prefetch) e poi inizia a eseguire il rendering della pagina, inclusa la recupero di tutte le risorse secondarie (come fa prerender). Tuttavia, il browser eviterà di eseguire gli elementi <script> (sia per gli script in linea sia per gli script src). Quando rileva un tag <script> di blocco, mette in pausa l'analizzatore e attende che l'utente acceda alla pagina prima di continuare. Nel frattempo, lo scanner di precaricamento può continuare a recuperare le risorse secondarie necessarie per la pagina, in modo che siano pronte per l'uso quando la pagina può continuare a caricarsi.

Ritardando gli elementi <script> di blocco, si evita gran parte della complessità dell'implementazione. Allo stesso tempo, avviando il processo di rendering e recuperando le risorse secondarie, si ottiene un enorme vantaggio rispetto a prefetch, potenzialmente quasi quanto un prerender completo.

Nel migliore dei casi (quando nella pagina non sono presenti script), questa opzione eseguirà il prerendering dell'intera pagina. In alternativa, quando una pagina contiene solo elementi script nel piè di pagina o solo script con async o defer attributi, la pagina verrà sottoposta a prerendering completo senza JavaScript. Anche nel peggiore dei casi (quando è presente uno script di blocco nel <head>), l'avvio del rendering della pagina e, in particolare, il precaricamento delle risorse secondarie dovrebbero migliorare notevolmente il caricamento della pagina.

Come utilizzare prerender until script?

Innanzitutto, attiva la funzionalità, poi prerender until script viene utilizzato nello stesso modo delle altre opzioni dell'API Speculation Rules con una nuova chiave prerender_until_script (nota i trattini bassi per renderlo un nome di chiave JSON valido).

Può essere utilizzato con le regole di elenco di URL statici:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

Può essere utilizzato anche con le regole dei documenti in cui gli URL di cui eseguire la speculazione sono disponibili come link nella pagina:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

prerender until script può quindi essere utilizzato con le opzioni API Speculation Rules standard, inclusi i vari valori di eagerness.

Poiché JavaScript non verrà eseguito, non è possibile leggere document.prerendering né l'evento prerenderingchange. Tuttavia, il tempo activationStart sarà diverso da zero.

L'esempio seguente mostra come eseguire il deployment dell'esempio precedente con un fallback a prefetch per i browser che non supportano prerender_until_script:

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

Chrome gestirà questa duplicazione senza problemi ed eseguirà la regola più appropriata per ogni impostazione di eagerness.

In alternativa, puoi utilizzarli con diversi livelli di eagerness, per eseguire il prefetch in modo eager e poi eseguire l'upgrade a prerender until script con più segnali come suggerito in precedenza con prefetch/prerender:

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

Tieni presente che non puoi eseguire l'upgrade di un prerender until script a un prerender completo in questo modo, ma comunicacelo se questo è un pattern che ti interessa che Chrome supporti aggiungendo una stella a questo bug.

Tutto JavaScript è in pausa?

No, solo gli elementi <script> causano la messa in pausa dell'analizzatore. Ciò significa che i gestori di script in linea (ad esempio onload) o gli URL javascript: non causano una pausa e potrebbero essere eseguiti.

Ad esempio, questo può registrare Hero image is now loaded nella console prima che si acceda alla pagina:

<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

Se invece il listener di eventi viene aggiunto con un <script>, Hero image is now loaded non verrà registrato nella console fino a quando la pagina non sarà attivata:

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

Questo potrebbe sembrare controintuitivo, ma in molti casi (come nell'esempio precedente) è probabilmente meglio eseguire l'azione immediatamente e ritardarla potrebbe portare a complicazioni più impreviste.

Inoltre, la maggior parte degli eventi in linea richiede un'azione dell'utente (ad esempio, onclick, onhover), quindi non verrà eseguita finché l'utente non potrà interagire con la pagina.

Infine, gli script di blocco precedenti metteranno in pausa il parser e impediranno il rilevamento dei gestori di eventi in linea. Pertanto, il messaggio non verrà caricato nella console fino all'attivazione, nonostante sia un gestore di eventi in linea:

<script>...</script>
<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

Questo è particolarmente importante per i gestori di script in linea che utilizzano codice definito in precedenza, che continuerà a funzionare come previsto:

<script>
imageLoadFunction() = {
   ...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">

Che dire degli script con attributi async e defer?

Gli script con attributi async e defer vengono ritardati fino all'attivazione, ma non impediscono all'analizzatore di continuare a elaborare il resto della pagina. Gli script vengono scaricati, ma non eseguiti fino a quando non si accede alla pagina.

Come attivare prerender until script?

prerender until script è una nuova opzione su cui stiamo lavorando e che è soggetta a modifiche, quindi non è disponibile per l'uso senza prima attivarla per il consenso esplicito.

Può essere attivato localmente per gli sviluppatori con il flag di Chrome chrome://flags/#prerender-until-script o con il flag della riga di comando --enable-features=PrerenderUntilScript.

prerender until script è ora disponibile anche come prova dell'origine a partire da Chrome 144. Le prove dell'origine consentono ai proprietari dei siti di attivare una funzionalità sui propri siti per consentire agli utenti reali di utilizzarla senza doverla attivare manualmente. In questo modo è possibile misurare l'impatto della funzionalità sugli utenti reali per assicurarsi che funzioni come previsto.

Esegui un test e condividi il tuo feedback

Siamo molto entusiasti di questa aggiunta proposta all'API Speculation Rules e invitiamo i proprietari dei siti a eseguire un test.

Condividi il tuo feedback sulla proposta nel repository GitHub. Per fornire feedback sull'implementazione di Chrome, segnala un bug di Chromium.