Gepubliceerd: 23 januari 2026
Chrome introduceert vanaf versie 144 een nieuwe origin-test voor de toevoeging van het prerender until-script aan de Speculation Rules API . Met deze origin-test kunnen websites de nieuwe functie uitproberen met echte gebruikers. Het doel is om de functie in de praktijk te testen en feedback te verzamelen voor het Chrome-team, zodat zij de functie verder kunnen ontwikkelen en kunnen bepalen of deze aan het webplatform moet worden toegevoegd.
Welk probleem probeert men hiermee op te lossen?
De Speculation Rules API maakt het mogelijk om pagina's alvast te laden voordat gebruikers ze daadwerkelijk bezoeken. Dit kan de laadtijden van toekomstige pagina's verbeteren door een deel of al het werk alvast te voltooien. Tot nu toe bood de API twee soorten speculatie: prefetch en prerender.
Prefetch haalt alleen het HTML-document op. Hierdoor wordt die cruciale eerste bron alvast geladen, wat vervolgens zorgt voor een prestatieverbetering wanneer een URL wordt bezocht. Het laadt geen subbronnen (zoals CSS, JavaScript of afbeeldingen) en voert ook geen JavaScript uit. Daardoor kan de browser nog steeds aanzienlijk werk moeten verrichten bij het laden van de pagina.
Prerender doet veel meer. Het haalt de subbronnen op en begint de pagina te renderen en JavaScript uit te voeren, bijna alsof de pagina in een verborgen achtergrondtabblad is geopend. Wanneer de gebruiker op de link klikt, krijgt hij direct toegang tot de pagina als de browser al het benodigde werk voor het renderen van de pagina heeft voltooid.
Het gebruik van de pre-rendering-optie kan de prestaties aanzienlijk verbeteren, maar brengt extra implementatiekosten en extra resourcekosten met zich mee. Indien niet zorgvuldig overwogen, kan dit ook onverwachte neveneffecten veroorzaken wanneer een pagina volledig wordt gepre-renderd voordat een gebruiker de pagina daadwerkelijk heeft bezocht. Zo kan het bijvoorbeeld voorkomen dat analyses worden uitgevoerd voordat een gebruiker de pagina heeft bezocht – wat de statistieken verstoort – als de analyseprovider geen rekening houdt met speculaties.
Websites die gebruikmaken van prerendering moeten er ook voor zorgen dat een gebruiker geen verouderde pagina te zien krijgt. Als je bijvoorbeeld een pagina op een webshop selecteert, iets aan je winkelmandje toevoegt en vervolgens de eerder geselecteerde pagina laadt, kan het zijn dat je de oude hoeveelheid in je winkelmandje ziet als de website er niet voor zorgt dat deze wordt bijgewerkt.
Deze complicaties bestaan ook bij prefetch als een deel van dit statusbeheer aan de serverzijde plaatsvindt, maar vormen vaak een groter probleem bij prerender. Het gebruik van prerender kan ingewikkelder zijn op complexere websites .
We horen echter van ontwikkelaars dat ze de prestatiewinst van het vooraf laden van de pagina al merken en dat ze met speculatieve regels nog meer voordeel willen behalen. Dit is waar prerender until script om de hoek komt kijken.
Wat is prerender until script?
Prerender until script is een nieuwe tussenweg tussen prefetch en prerender. Het haalt het HTML-document op (net als prefetch) en begint vervolgens met het renderen van de pagina, inclusief het ophalen van alle subbronnen (net als prerender). Cruciaal is echter dat de browser het uitvoeren <script> -elementen vermijdt (zowel inline scripts als src scripts). Wanneer de browser een blokkerende <script> -tag tegenkomt, pauzeert hij de parser en wacht hij tot de gebruiker naar de pagina navigeert voordat hij verdergaat. In de tussentijd kan de preload-scanner doorgaan met het ophalen van de subbronnen die de pagina nodig heeft, zodat deze klaar zijn voor gebruik wanneer de pagina verder kan laden.
Door blokkerende <script> -elementen achter te houden, wordt een groot deel van de implementatiecomplexiteit vermeden. Tegelijkertijd levert het starten van het renderingproces en het ophalen van de subbronnen een enorme winst op ten opzichte van prefetching – mogelijk bijna net zoveel als bij een volledige pre-rendering.
In het beste geval (wanneer er helemaal geen scripts op de pagina staan) zal deze optie de hele pagina vooraf renderen. Of, wanneer een pagina alleen scriptelementen in de footer bevat of alleen scripts met de attributen async of defer , wordt de pagina volledig vooraf gerenderd zonder die JavaScript. Zelfs in het slechtste geval (wanneer er een blokkerend script in de <head> staat) zou het starten van de paginarendering, en met name het vooraf laden van de subbronnen, moeten leiden tot een aanzienlijk snellere laadtijd.
Hoe gebruik ik een prerender-script?
Schakel eerst de functie in en gebruik vervolgens de optie `prerender until script` op dezelfde manier als de andere Speculation Rules API-opties met een nieuwe prerender_until_script -sleutel (let op de underscores om er een geldige JSON-sleutelnaam van te maken).
Dit kan worden gebruikt met lijstregels voor statische URL's:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Het kan ook worden gebruikt met documentregels waarbij de te speculeren URL's als links op de pagina beschikbaar zijn:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Het script kan vervolgens worden voorgerenderd totdat het kan worden gebruikt met de gebruikelijke Speculation Rules API-opties, inclusief de verschillende eagerness-waarden .
Omdat JavaScript niet wordt uitgevoerd, kan document.prerendering niet worden gelezen en evenmin de prerenderingchange gebeurtenis. De activationStart tijd zal echter wel een waarde hebben die niet nul is.
Het volgende voorbeeld laat zien hoe je het vorige voorbeeld kunt implementeren met een terugvaloptie naar prefetch voor browsers die prerender_until_script niet ondersteunen:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome zal deze duplicatie zonder problemen afhandelen en de meest geschikte regel voor elke eagerness-instelling uitvoeren.
Als alternatief kunt u deze met verschillende eagerness-niveaus gebruiken om eerst eager prefetch uit te voeren en vervolgens over te schakelen naar prerender totdat het script meer signalen bevat , zoals eerder gesuggereerd met prefetch/prerender :
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Houd er rekening mee dat je een prerender-script op deze manier niet kunt upgraden naar een volledige prerender. Laat ons echter weten of je deze functionaliteit graag door Chrome ondersteund zou zien door deze bug te markeren met een sterretje .
Is alle JavaScript gepauzeerd?
Nee, alleen <script> -elementen zorgen ervoor dat de parser wordt gepauzeerd. Dit betekent dat inline scripthandlers (bijvoorbeeld onload ) of javascript: URL's geen pauze veroorzaken en gewoon kunnen worden uitgevoerd.
Dit kan bijvoorbeeld de melding Hero image is now loaded in de console weergeven voordat er naar de pagina wordt genavigeerd:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Als de gebeurtenislistener echter wordt toegevoegd met een <script> , dan wordt de melding Hero image is now loaded pas in de console weergegeven nadat de pagina is geactiveerd.
<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>
Dit lijkt misschien tegenstrijdig, maar in veel gevallen (zoals in het vorige voorbeeld!) is het waarschijnlijk beter om direct actie te ondernemen, omdat uitstel kan leiden tot onverwachte complicaties.
Bovendien vereisen de meeste inline-events een gebruikersactie (bijvoorbeeld onclick , onhover ) en worden ze dus pas uitgevoerd wanneer de gebruiker met de pagina kan interageren.
Ten slotte zullen eerdere blokkerende scripts de parser pauzeren en zo voorkomen dat de inline-gebeurtenisafhandelaars worden ontdekt. Hierdoor wordt het bericht pas in de console geladen na activering, ondanks dat het een inline-gebeurtenisafhandelaar betreft.
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Dit is met name relevant voor inline script handlers die gebruikmaken van eerder gedefinieerde code; deze zullen gewoon blijven werken zoals verwacht.
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
En hoe zit het met scripts met de attributen async en defer ?
Scripts met de attributen async en defer worden pas na activering uitgevoerd, maar blokkeren de parser niet bij het verwerken van de rest van de pagina. De scripts worden gedownload, maar pas uitgevoerd wanneer de pagina wordt bezocht.
Hoe schakel ik prerenderen tot het script is voltooid in?
De optie 'Prerender until script' is een nieuwe functie waar we aan werken en die nog kan veranderen. Je kunt deze dus pas gebruiken nadat je hem eerst hebt ingeschakeld.
Deze functie kan lokaal voor ontwikkelaars worden ingeschakeld met de Chrome-vlag chrome://flags/#prerender-until-script of met de opdrachtregeloptie --enable-features=PrerenderUntilScript .
De functie 'Prerender until script' is nu ook beschikbaar als Origin-proefversie in Chrome 144. Met Origin-proefversies kunnen website-eigenaren een functie op hun site inschakelen, zodat echte gebruikers de functie kunnen gebruiken zonder deze handmatig te hoeven activeren. Hierdoor kan de impact van de functie op echte gebruikers worden gemeten om te garanderen dat deze naar behoren werkt.
Probeer het eens uit en deel je feedback.
We zijn erg enthousiast over deze voorgestelde toevoeging aan de Speculation Rules API en moedigen website-eigenaren aan om deze uit te testen.
Geef je feedback op het voorstel via de GitHub-repository . Voor feedback over de implementatie in Chrome kun je een bugrapport indienen bij Chromium .