Prerender Until Script: De Middenweg Tussen Prefetch en Prerender

Origin Trial: prerender_until_script is beschikbaar als een Origin Trial in Chrome 144 tot en met 150. Je moet je registreren voor een token of het lokaal inschakelen via chrome://flags/#prerender-until-script. Er is nog geen Intent to Ship ingediend.

Laatst beoordeeld door Arjen Karel in maart 2026

Prerender Until Script: De Nieuwe Modus voor Speculative Loading

Latency is de bottleneck. Ik zeg dit al jaren, en het blijft het allerbelangrijkste probleem in web performance. Hoezeer we ons Critical Rendering Path ook optimaliseren of kilobytes van onze bundels afschaven, we zijn uiteindelijk gebonden aan de wetten van de fysica en de round-trip time (RTT) van het netwerk.

Lange tijd hebben we geprobeerd deze wetten te omzeilen met Speculative Loading: raden waar de gebruiker hierna naartoe gaat en dat alvast laden. Tot nu toe hadden we twee primaire tools, en geen van beide was perfect:

• prefetch: Veilig en lichtgewicht, maar het haalt alleen de HTML op. De browser moet nog steeds de HTML parsen, de DOM opbouwen en subresources (CSS, afbeeldingen) ontdekken nadat de gebruiker heeft geklikt. Het lost de wachttijd van het netwerk op, maar niet het renderwerk.
• prerender: De nucleaire optie. Het laadt alles, voert JavaScript uit en rendert de pagina in een verborgen achtergrondtabblad. Het is direct, maar het is duur. Het vreet bandbreedte, verbruikt geheugen en vuurt analytics-pixels af en voert code uit voor pagina's die de gebruiker misschien nooit zal zien.

We hadden een middenweg nodig. De visuele gereedheid van een prerender zonder de kosten en het risico van het uitvoeren van applicatielogica.

Hoe prerender_until_script werkt

prerender_until_script ontkoppelt parsen van uitvoering. Wanneer je deze Speculation Rule gebruikt, geef je de browser de volgende instructies:

• Haal het document op (zoals een prefetch).
• Parse de HTML-stream en construeer de DOM.
• Draai de Preload Scanner. Dit is het cruciale deel. De browser ontdekt en downloadt subresources zoals high-priority CSS en de LCP afbeelding.

Zodra de parser een JavaScript-uitvoeringspunt tegenkomt, kunnen er twee dingen gebeuren:

• Synchrone scripts: De parser stopt onmiddellijk.
• Async/defer scripts: Deze worden gedownload en in de wachtrij geplaatst, maar niet uitgevoerd.

De browser bouwt de visuele schil van de pagina: de lay-out, de typografie, de afbeeldingen. Maar de applicatielogica blijft bevroren. De pagina zit in het geheugen, volledig opgemaakt, wachtend tot de gebruiker klikt.

Wanneer de klik plaatsvindt, wordt de pagina direct ingewisseld. De JavaScript wordt uitgevoerd, de event handlers worden gekoppeld en je analytics worden precies op het juiste moment afgevuurd.

Prefetch vs prerender_until_script vs prerender

* Volledige prerender kan beschermen tegen voortijdige analytics met behulp van document.prerendering, maar je moet die code zelf toevoegen.

Dit is waarom prerender_until_script belangrijk is. Je krijgt het laden van subresources en de DOM-constructie van een volledige prerender, maar zonder de analytics-vervuiling en geheugenkosten van het draaien van JavaScript. Voor content sites met zware third-party scripts is dit de sweet spot.

De Implementatie

We implementeren dit met de Speculation Rules API. Omdat prerender_until_script experimentueel is (Origin Trial, Chrome 144 tot en met 150), heb je backwards compatibility nodig.

Browsers die de prerender_until_script sleutel niet herkennen, zullen deze negeren. Voeg een prefetch fallback toe voor dezelfde set URL's. Chrome zal deze regels dedupliceren en de meest capabele actie toepassen die beschikbaar is.

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

Het prefetch blok is de fallback. In browsers die prerender_until_script ondersteunen, kiest Chrome automatisch de meest capabele actie. In browsers die dat niet doen, wordt de prefetch regel nog steeds uitgevoerd. Je krijgt het best beschikbare gedrag zonder user-agent sniffing.

Als je je eigen aangepaste set speculation rules wilt genereren, gebruik dan de speculation rules generator.

Hoe prerender_until_script in te schakelen

Aangezien dit een Origin Trial is, heb je twee opties:

1. Registreer voor een Origin Trial token op het Chrome Origin Trials dashboard. Voeg de token toe als een <meta> tag in je <head>: <meta http-equiv="origin-trial" content="YOUR_TOKEN">
2. Test lokaal door te navigeren naar chrome://flags/#prerender-until-script en de flag in te schakelen.

De Origin Trial loopt van Chrome 144 (januari 2026) tot en met Chrome 150 (ongeveer medio 2026). Als het Chrome-team het daarna als een stabiele feature uitbrengt, is de token niet meer nodig. De officiële Chrome blogpost dekt de volledige details.

Speculation rules performance in de echte wereld

Er heeft nog niemand prerender_until_script benchmarks gepubliceerd (het is te nieuw). Maar de bredere Speculation Rules API heeft harde data van grote implementaties:

• Ray-Ban implementeerde prerender speculation rules en zag een 43% LCP-verbetering op mobiel (4.69s naar 2.66s). Conversiepercentages verdubbelden.
• Shopify rolde prefetch speculation rules uit over alle Liquid-storefronts en mat 130ms sneller op desktop en 180ms sneller op mobiel over alle laadstatistieken.
• Cloudflare Speed Brain gebruikt speculation rules met een ML-voorspellingsmodel en rapporteert een 45% LCP-reductie bij succesvolle prefetches.

Adoptie groeit snel. Volgens de 2025 Web Almanac gebruikt 35% van de mobiele websites nu de Speculation Rules API. De meeste van die groei komt van WordPress 6.8, dat in maart 2025 speculation rules in de core inbouwde.

prerender_until_script zou resultaten moeten leveren tussen prefetch en volledige prerender. De subresources zijn al gecachet en de DOM is gebouwd. Het enige werk dat nog over is bij activering, is de uitvoering van scripts. Voor websites die worden gemonitord door CoreDash, zie ik doorgaans dat speculation rules de daaropvolgende navigatie LCP met 30 tot 50% verlagen.

Overwegingen

Eagerness: Ik raad bijna exclusief moderate aan. Dit triggert de speculatie bij een hover (wanneer de aanwijzer 200ms blijft hangen). immediate is te agressief voor de meeste sites en riskeert het verspillen van bandbreedte op mobiele verbindingen.

Uitsluitingen: Wees hier gedisciplineerd. Speculeer nooit op state-veranderende URL's zoals /logout of /add-to-cart. Hoewel prerender_until_script beschermt tegen scriptuitvoering, zou je deze endpoints niet eens onnodig moeten ophalen.

Parser blocking: De parser stopt onmiddellijk wanneer deze een synchrone <script> tag tegenkomt. Als je vroege inline scripts in de DOM hebt (bijvoorbeeld <script>loadWhileIdle(chat.js)</script>), zal de prerender daar stoppen. Verplaats scripts naar de onderkant van de pagina of gebruik defer om de hoeveelheid van de DOM die vooraf gebouwd wordt te maximaliseren.

Inline handlers: prerender_until_script pauzeert alleen <script> elementen. Inline event handlers op andere elementen (zoals <img onload="track()">) zullen nog steeds worden uitgevoerd als de parser ze bereikt voor een blokkerend script. Zorg ervoor dat je analytics en tracking niet worden getriggerd door inline handlers.

Je kunt speculation rules debuggen in Chrome DevTools onder het Application-paneel. Het Chrome DevTools Network-paneel toont ook speculatieve fetches met een apart icoon. Gebruik Real User Monitoring om de daadwerkelijke INP en LCP-impact te verifiëren na het inzetten van speculation rules in productie.