De nieuwe Prerender Until Script Speculatieregel

Origin Trial Status: Deze functie is momenteel een Origin Trial. Om het te implementeren, moet je je registreren voor een Origin Trial token of het lokaal inschakelen via chrome://flags. Ondanks de experimentele aard, geeft vroege feedback van de engineering community uitzonderlijke stabiliteit en  prestatieverbeteringen aan.

Prerender Until Script: De nieuwe modus voor Speculatief Laden

Latentie is de bottleneck. Ik zeg dit al jaren, en het blijft het grootste afzonderlijke probleem in web performance. Hoeveel 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-tijd (RTT) van het netwerk.

Lange tijd hebben we geprobeerd deze wetten te bedriegen met Speculatief Laden: gissen waar de gebruiker vervolgens naartoe zal gaan en het vooraf laden. Tot nu toe hadden we twee hoofdtools, en geen van beide was perfect:

• prefetch: Veilig en lichtgewicht, maar het haalt alleen de HTML op. De browser moet na de klik nog steeds parsen, de DOM opbouwen en subbronnen (CSS, afbeeldingen) ontdekken. Het lost het netwerk-wachten op, maar niet het rendering-werk.
• prerender: De nucleaire optie. Het laadt alles, voert JavaScript uit en rendert de pagina in een verborgen achtergrondtabblad. Het is instant, maar het is duur. Het eet bandbreedte, verbruikt geheugen, en het ergste van alles, het activeert "neveneffecten", vuurt analytics-pixels en voert code uit voor pagina's die de gebruiker misschien nooit daadwerkelijk ziet.

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

prerender_until_script.

De genialiteit van prerender_until_script ligt in hoe het parsen loskoppelt van uitvoering.Wanneer je deze specifieke Speculatieregel gebruikt, instrueer je de browser om:

• Het document op te halen (zoals een prefetch).
• De HTML-stroom te parsen en de DOM te construeren.
• De Preload Scanner te laten draaien. Dit is het kritieke deel. De browser ontdekt en downloadt subbronnen zoals CSS met hoge prioriteit en de LCP-afbeelding.

Echter, het moment dat de parser een JavaScript-uitvoeringspunt tegenkomt, kunnen er 2 dingen gebeuren:

• Synchrone Scripts: De parser stopt onmiddellijk.
• Async/Defer Scripts: Ze worden gedownload en in de wachtrij gezet, maar niet uitgevoerd.

De browser bouwt de visuele "schil" van de pagina: De lay-out, de typografie, de afbeeldingen—maar laat de applicatielogica bevroren. De pagina zit in het geheugen, chemisch stabiel, wachtend tot de gebruiker klikt.

Wanneer de klik plaatsvindt, wordt de pagina direct ingewisseld en wordt de "gepauzeerde" status opgeheven. De JavaScript voert uit, de event handlers hechten zich aan, en je analytics vuren precies wanneer ze zouden moeten.

De Implementatie

We implementeren dit met behulp van de Speculation Rules API. Omdat prerender_until_script een experimentele functie is (landt in Chrome 144), moeten we achterwaartse compatibiliteit garanderen.

Browsers die de sleutel prerender_until_script niet herkennen, zullen deze negeren. Daarom definieert een verantwoordelijke implementatie een prefetch-fallback voor dezelfde set URL's. Chrome zal deze regels automatisch ontdubbelen en de meest capabele actie toepassen die beschikbaar is.

Hier is de JSON-structuur voor een productierijpe implementatie::

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

Tip: als je snel je eigen aangepaste set speculatieregels wilt genereren, kun je de speculatieregels generator gebruiken

Overwegingen

Eagerness: Ik raad bijna uitsluitend moderate aan. Dit activeert de speculatie bij hover (specifiek, wanneer de pointer 200ms blijft hangen). immediate is te agressief voor de meeste implementaties en riskeert verspilling van gebruikersbandbreedte op mobiele verbindingen.

Uitsluitingen: Je moet hier gedisciplineerd zijn. Speculeer nooit op startveranderende URL's zoals /logout of /add-to-cart. Hoewel prerender_until_script beschermt tegen scriptuitvoering, dicteert een goede architectuur dat we deze eindpunten niet eens onnodig zouden moeten ophalen.

Zwakte (Parser Blocking): De parser stopt onmiddellijk bij het tegenkomen van een synchrone <script> tag. Dit doet verbeteringen zoals <script>loadWhileIdle(chat.js)</script> teniet als ze vroeg in de DOM verschijnen. Mogelijk moet je bestaande code refactoren om deze scripts onderaan de pagina te plaatsen.

Inline Handlers: Merk op dat prerender_until_script alleen <script>-elementen pauzeert. Inline event handlers op andere elementen (bijv. <img onload="track()">) zullen nog steeds uitvoeren als de parser ze bereikt vóór een blokkerend script. Zorg ervoor dat je analytics-pixels en trackinglogica niet worden geactiveerd door deze inline handlers tijdens de speculatiefase.