Den nya Prerender Until Script Speculation Rule

Status för Origin Trial: Denna funktion är för närvarande en Origin Trial. För att implementera den måste du registrera dig för en Origin Trial-token eller aktivera den lokalt via chrome://flags. Trots dess experimentella natur indikerar tidig feedback från utvecklargemenskapen exceptionell stabilitet och  prestandaförbättringar.

Prerender Until Script: Det nya läget för Speculative Loading

Latens är flaskhalsen. Jag har sagt detta i åratal, och det förblir det enskilt största problemet inom webbprestanda. Oavsett hur mycket vi optimerar vår Critical Rendering Path eller skalar bort kilobyte från våra paket, är vi i slutändan bundna av fysikens lagar och nätverkets tur-och-retur-tid (RTT).

Under lång tid har vi försökt kringgå dessa lagar med hjälp av Speculative Loading: att gissa vart användaren ska gå härnäst och ladda det i förväg. Fram till nu har vi haft två huvudverktyg, och inget var perfekt:

• prefetch: Säkert och lättviktigt, men det hämtar bara HTML. Webbläsaren måste fortfarande parsa, bygga DOM:en och upptäcka underresurser (CSS, bilder) efter att användaren klickar. Det löser nätverksväntan, men inte renderingsarbetet.
• prerender: Det nukleära alternativet. Det laddar allt, kör JavaScript och renderar sidan i en dold bakgrundsflik. Det är omedelbart, men det är dyrt. Det äter bandbredd, förbrukar minne och värst av allt, det utlöser "sidoeffekter", skickar analyspixlar och kör kod för sidor som användaren kanske aldrig faktiskt ser.

Vi behövde uppenbarligen en medelväg. Vi behövde den visuella beredskapen hos en prerender utan beräkningskostnaden och risken med att köra applikationslogik.

prerender_until_script.

Det geniala med prerender_until_script ligger i hur det frikopplar parsning från exekvering.När du använder denna specifika Speculation Rule instruerar du webbläsaren att:

• Hämta dokumentet (som en prefetch).
• Parsa HTML-strömmen och bygga DOM:en.
• Köra Preload Scanner. Detta är den kritiska delen. Webbläsaren upptäcker och laddar ner underresurser som högprioriterad CSS och LCP-bilden.

Dock, i samma ögonblick som parsern stöter på en JavaScript-exekveringspunkt kan två saker hända:

• Synkrona skript: Parsern stannar omedelbart.
• Async/Defer-skript: De laddas ner och köas, men körs inte.

Webbläsaren bygger det visuella "skalet" av sidan: Layouten, typografin, bilderna – men lämnar applikationslogiken fryst. Sidan ligger i minnet, kemiskt stabil, och väntar på att användaren ska klicka.

När klicket sker byts sidan in omedelbart och det "pausade" tillståndet hävs. JavaScript körs, händelsehanterarna kopplas in och din analys aktiveras exakt när den ska.

Implementationen

Vi implementerar detta med hjälp av Speculation Rules API. Eftersom prerender_until_script är en experimentell funktion (som landar i Chrome 144) måste vi säkerställa bakåtkompatibilitet.

Webbläsare som inte känner igen nyckeln prerender_until_script kommer att ignorera den. Därför definierar en ansvarsfull implementation en prefetch-fallback för samma uppsättning URL:er. Chrome kommer automatiskt att deduplicera dessa regler och tillämpa den mest kapabla åtgärden som finns tillgänglig.

Här är JSON-strukturen för en produktionsklar implementation::

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

Tips: om du snabbt vill generera din egen anpassade uppsättning Speculation Rules kan du använda generatorn för Speculation Rules

Överväganden

Eagerness: Jag rekommenderar nästan uteslutande moderate. Detta utlöser spekulationen vid hovring (specifikt när pekaren dröjer sig kvar i 200ms). immediate är för aggressivt för de flesta implementationer och riskerar att slösa användarens bandbredd på mobilanslutningar.

Undantag: Du måste vara disciplinerad här. Spekulera aldrig på tillståndsändrande URL:er som /logout eller /add-to-cart. Även om prerender_until_script skyddar mot skriptkörning dikterar god arkitektur att vi inte ens bör hämta dessa ändpunkter i onödan.

Svaghet (Parser Blocking): Parsern stannar omedelbart vid mötet med en synkron <script>-tagg. Detta upphäver förbättringar som <script>loadWhileIdle(chat.js)</script> om de dyker upp tidigt i DOM:en. Du kan behöva refaktorera befintlig kod för att placera dessa skript längst ner på sidan.

Inline-hanterare: Observera att prerender_until_script bara pausar <script>-element. Inline-händelsehanterare på andra element (t.ex. <img onload="track()">) kommer fortfarande att köras om parsern når dem före ett blockerande skript. Se till att dina analyspixlar och spårningslogik inte utlöses av dessa inline-hanterare under spekulationsfasen.