La nuova Speculation Rule Prerender Until Script

Stato dell'Origin Trial: Questa funzionalità è attualmente in fase di Origin Trial. Per implementarla, devi registrarti per ottenere un token Origin Trial o abilitarla localmente tramite chrome://flags. Nonostante la sua natura sperimentale, i primi feedback dalla community di ingegneria indicano stabilità e  miglioramenti delle prestazioni eccezionali.

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 nelle performance web. Non importa quanto ottimizziamo il nostro Critical Rendering Path o quanti kilobyte togliamo dai nostri bundle, siamo in ultima analisi vincolati dalle leggi della fisica e dal round-trip time (RTT) della rete.

Per molto tempo, abbiamo cercato di ingannare queste leggi usando lo Speculative Loading: indovinando dove andrà l'utente successivamente e caricandolo in anticipo. Fino ad ora, avevamo due strumenti principali, e nessuno dei due era perfetto:

• prefetch: Sicuro e leggero, ma recupera solo l'HTML. Il browser deve ancora analizzare, costruire il DOM e scoprire le sottorisorse (CSS, immagini) dopo che l'utente fa clic. Risolve l'attesa della 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, memoria e, peggio ancora, innesca "effetti collaterali", attivando pixel di analytics ed eseguendo codice per pagine che l'utente potrebbe non vedere mai.

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

prerender_until_script.

La genialità di prerender_until_script sta nel modo in cui disaccoppia il parsing dall'esecuzione.Quando si utilizza questa Speculation Rule specifica, si indica al browser di:

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

Tuttavia, nel momento in cui il parser incontra un punto di esecuzione JavaScript, possono accadere 2 cose:

• Script Sincroni: Il parser si ferma immediatamente.
• Script Async/Defer: Vengono scaricati e messi in coda, ma non eseguiti.

Il browser costruisce l'"involucro" visivo della pagina: Il layout, la tipografia, le immagini—ma lascia la logica applicativa congelata. La pagina rimane in memoria, chimicamente stabile, in attesa del clic dell'utente.

Quando si verifica il clic, la pagina viene scambiata istantaneamente e lo stato "in pausa" viene revocato. Il JavaScript viene eseguito, i gestori di eventi si collegano e le analytics si attivano esattamente quando dovrebbero.

L'Implementazione

Implementiamo questo utilizzando la Speculation Rules API. Poiché prerender_until_script è una funzionalità sperimentale (in arrivo su Chrome 144), dobbiamo garantire la retrocompatibilità.

I browser che non riconoscono la chiave prerender_until_script la ignoreranno. Pertanto, un'implementazione responsabile definisce un fallback di prefetch per lo stesso set di URL. Chrome deduplicherà automaticamente queste regole e applicherà l'azione più capace disponibile.

Ecco la struttura JSON per un'implementazione pronta per la produzione::

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

Suggerimento: se desideri generare rapidamente il tuo set personalizzato di speculation rules, puoi utilizzare lo speculation rules generator

Considerazioni

Eagerness: Consiglio quasi esclusivamente moderate. Questo innesca la speculazione al passaggio del mouse (in particolare, quando il puntatore indugia per 200 ms). immediate è troppo aggressivo per la maggior parte delle implementazioni e rischia di sprecare la larghezza di banda dell'utente su connessioni mobili.

Esclusioni: Devi essere disciplinato qui. Mai speculare su URL che cambiano lo stato come /logout o /add-to-cart. Mentre prerender_until_script protegge dall'esecuzione degli script, una buona architettura impone che non dovremmo nemmeno recuperare questi endpoint inutilmente.

Punto debole (Blocco del Parser): Il parser si ferma immediatamente non appena incontra un tag <script> sincrono. Questo annulla i miglioramenti come <script>loadWhileIdle(chat.js)</script> se appaiono presto nel DOM. Potrebbe essere necessario rifattorizzare il codice esistente per posizionare questi script in fondo alla pagina.

Gestori Inline: Tieni presente che prerender_until_script mette in pausa solo gli elementi <script>. I gestori di eventi inline su altri elementi (es. <img onload="track()">) verranno comunque eseguiti se il parser li raggiunge prima di uno script bloccante. Assicurati che i tuoi pixel di analytics e la logica di tracciamento non vengano attivati da questi gestori inline durante la fase di speculazione.