Prerender Until Script: La Via di Mezzo tra Prefetch e Prerender

Origin Trial: prerender_until_script è disponibile come Origin Trial da Chrome 144 a 150. Devi registrarti per un token o abilitarlo localmente tramite chrome://flags/#prerender-until-script. Non è stata ancora presentata alcuna Intent to Ship.

Ultima revisione di Arjen Karel a Marzo 2026

Prerender Until Script: La Nuova Modalità per lo Speculative Loading

La latenza è il collo di bottiglia. Lo dico da anni, e rimane il singolo problema più grande nella web performance. Non importa quanto ottimizziamo il nostro Critical Rendering Path o quanti kilobyte risparmiamo dai nostri bundle, in ultima analisi siamo vincolati dalle leggi della fisica e dal round-trip time (RTT) della rete.

Per molto tempo abbiamo cercato di aggirare queste leggi usando lo Speculative Loading: indovinare dove andrà poi l'utente e caricarlo in anticipo. Finora avevamo due strumenti principali, e nessuno dei due era perfetto:

• prefetch: Sicuro e leggero, ma scarica solo l'HTML. Il browser deve ancora parsare, costruire il DOM e scoprire le sottorisorse (CSS, immagini) dopo che l'utente ha cliccato. Risolve l'attesa di rete, ma non il lavoro di rendering.
• prerender: L'opzione nucleare. Carica tutto, esegue JavaScript e renderizza la pagina in una scheda nascosta in background. È istantaneo, ma è costoso. Consuma larghezza di banda, occupa memoria e attiva pixel analitici ed esegue codice per pagine che l'utente potrebbe non vedere mai.

Avevamo bisogno di una via di mezzo. La prontezza visiva di un prerender senza il costo e il rischio di eseguire la logica applicativa.

Come funziona prerender_until_script

prerender_until_script disaccoppia il parsing dall'esecuzione. Quando usi questa Speculation Rule, istruisci il browser a:

• Scaricare il documento (come un prefetch).
• Parsare lo stream HTML e costruire il DOM.
• Eseguire il Preload Scanner. Questa è la parte critica. Il browser scopre e scarica le sottorisorse come il CSS ad alta priorità e l'immagine LCP.

Nel momento in cui il parser incontra un punto di esecuzione JavaScript, possono accadere due cose:

• Script sincroni: Il parser si ferma immediatamente.
• Script async/defer: Vengono scaricati e messi in coda, ma non eseguiti.

Il browser costruisce il guscio visivo della pagina: il layout, la tipografia, le immagini. Ma la logica applicativa rimane congelata. La pagina risiede in memoria, completamente impaginata, in attesa del clic dell'utente.

Quando avviene il clic, la pagina viene scambiata istantaneamente. JavaScript viene eseguito, gli event handler si agganciano e le tue analytics si attivano esattamente quando dovrebbero.

Prefetch vs prerender_until_script vs prerender

* Il prerender completo può proteggere contro analytics premature usando document.prerendering, ma devi aggiungere quel codice tu stesso.

Ecco perché prerender_until_script è importante. Ottieni il caricamento delle sottorisorse e la costruzione del DOM di un prerender completo, ma senza l'inquinamento delle analytics e il costo in memoria dell'esecuzione di JavaScript. Per i siti di contenuti con pesanti script di terze parti, questo è il punto di equilibrio ideale.

L'Implementazione

Implementiamo questo usando la Speculation Rules API. Poiché prerender_until_script è sperimentale (Origin Trial, da Chrome 144 a 150), ti serve la retrocompatibilità.

I browser che non riconoscono la chiave prerender_until_script la ignoreranno. Aggiungi un fallback prefetch per lo stesso set di URL. Chrome deduplicherà queste regole e applicherà l'azione più capace a disposizione.

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

Il blocco prefetch è il fallback. Nei browser che supportano prerender_until_script, Chrome sceglie automaticamente l'azione più capace. Nei browser che non lo fanno, viene comunque eseguita la regola prefetch. Ottieni il miglior comportamento disponibile senza user-agent sniffing.

Se vuoi generare il tuo set personalizzato di speculation rules, usa lo speculation rules generator.

Come abilitare prerender_until_script

Poiché questo è un Origin Trial, hai due opzioni:

1. Registrarti per un token Origin Trial nella dashboard Chrome Origin Trials. Aggiungi il token come tag <meta> nel tuo <head>: <meta http-equiv="origin-trial" content="IL_TUO_TOKEN">
2. Testare localmente navigando su chrome://flags/#prerender-until-script e abilitando il flag.

L'Origin Trial va da Chrome 144 (Gennaio 2026) fino a Chrome 150 (circa a metà del 2026). Se il team di Chrome lo rilascia come funzionalità stabile dopo tale data, il token non sarà più necessario. Il post ufficiale sul blog di Chrome copre tutti i dettagli.

Prestazioni reali delle speculation rules

Nessuno ha ancora pubblicato benchmark per prerender_until_script (è troppo nuovo). Ma la più ampia Speculation Rules API ha dati reali derivanti da grandi distribuzioni:

• Ray-Ban ha implementato le speculation rules per il prerender e ha visto un miglioramento del 43% del LCP su mobile (da 4,69s a 2,66s). I tassi di conversione sono raddoppiati.
• Shopify ha distribuito le speculation rules per il prefetch in tutte le vetrine Liquid e ha misurato 130ms in meno su desktop e 180ms in meno su mobile in tutte le metriche di caricamento.
• Cloudflare Speed Brain usa le speculation rules con un modello di previsione ML e riporta una riduzione del 45% del LCP sui prefetch riusciti.

L'adozione sta crescendo rapidamente. Secondo il Web Almanac 2025, il 35% dei siti web mobile usa ora la Speculation Rules API. Gran parte di quella crescita deriva da WordPress 6.8, che ha integrato le speculation rules nel core a Marzo 2025.

prerender_until_script dovrebbe fornire risultati intermedi tra prefetch e prerender completo. Le sottorisorse sono già memorizzate in cache e il DOM è costruito. L'unico lavoro rimasto all'attivazione è l'esecuzione degli script. Tra i siti monitorati da CoreDash, vedo tipicamente che le speculation rules riducono il LCP della navigazione successiva dal 30 al 50%.

Considerazioni

Eagerness: Raccomando quasi esclusivamente moderate. Questo innesca la speculazione sull'hover (quando il puntatore indugia per 200ms). immediate è troppo aggressivo per la maggior parte dei siti e rischia di sprecare larghezza di banda sulle connessioni mobile.

Esclusioni: Sii disciplinato qui. Non speculare mai su URL che modificano lo stato come /logout o /add-to-cart. Sebbene prerender_until_script protegga contro l'esecuzione degli script, non dovresti nemmeno fare il fetch di questi endpoint inutilmente.

Blocco del parser: Il parser si ferma immediatamente appena incontra un tag <script> sincrono. Se hai script inline all'inizio del DOM (ad esempio, <script>loadWhileIdle(chat.js)</script>), il prerender si fermerà lì. Sposta gli script in fondo alla pagina o usa defer per massimizzare quanta parte del DOM viene precostruita.

Handler inline: prerender_until_script mette in pausa solo gli elementi <script>. Gli event handler inline su altri elementi (come <img onload="track()">) verranno comunque eseguiti se il parser li raggiunge prima di uno script bloccante. Assicurati che le tue analytics e i tuoi tracciamenti non vengano attivati da handler inline.

Puoi eseguire il debug delle speculation rules nei Chrome DevTools sotto il pannello Application. Il pannello Network dei Chrome DevTools mostrerà anche i fetch speculativi con un'icona distinta. Usa il Real User Monitoring per verificare l'impatto effettivo su INP e LCP dopo aver distribuito le speculation rules in produzione.