Prerender Until Script: Der Mittelweg zwischen Prefetch und Prerender

Origin Trial: prerender_until_script ist als Origin Trial in Chrome 144 bis 150 verfügbar. Sie müssen sich für einen Token registrieren oder es lokal über chrome://flags/#prerender-until-script aktivieren. Es wurde noch kein Intent to Ship eingereicht.

Zuletzt überprüft von Arjen Karel im März 2026

Prerender Until Script: Der neue Modus für Speculative Loading

Latenz ist der Flaschenhals. Ich sage das seit Jahren, und es bleibt das größte Einzelproblem der Web-Performance. Egal wie sehr wir unseren Critical Rendering Path optimieren oder Kilobytes von unseren Bundles abknapsen, wir sind letztendlich an die Gesetze der Physik und die Round-Trip Time (RTT) des Netzwerks gebunden.

Lange Zeit haben wir versucht, diese Gesetze mit Speculative Loading zu umgehen: Wir haben geraten, wohin der Nutzer als Nächstes geht, und es vorab geladen. Bisher hatten wir zwei Hauptwerkzeuge, und keines war perfekt:

• prefetch: Sicher und ressourcenschonend, aber es holt nur das HTML. Der Browser muss nach dem Klick des Nutzers immer noch parsen, das DOM aufbauen und Subressourcen (CSS, Bilder) entdecken. Es löst die Netzwerklatenz, aber nicht die Rendering-Arbeit.
• prerender: Die nukleare Option. Es lädt alles, führt JavaScript aus und rendert die Seite in einem versteckten Hintergrund-Tab. Es ist sofort verfügbar, aber teuer. Es frisst Bandbreite, verbraucht Speicherplatz und löst Analyse-Pixel sowie Code für Seiten aus, die der Nutzer vielleicht nie sieht.

Wir brauchten einen Mittelweg. Die visuelle Bereitschaft eines Prerenders ohne die Kosten und das Risiko, Anwendungslogik auszuführen.

Wie prerender_until_script funktioniert

prerender_until_script entkoppelt das Parsen von der Ausführung. Wenn Sie diese Speculation Rule verwenden, weisen Sie den Browser an:

• Das Dokument abzurufen (wie bei einem Prefetch).
• Den HTML-Stream zu parsen und das DOM aufzubauen.
• Den Preload Scanner auszuführen. Das ist der entscheidende Teil. Der Browser entdeckt und lädt Subressourcen wie hochpriorisiertes CSS und das LCP-Bild herunter.

In dem Moment, in dem der Parser auf einen JavaScript-Ausführungspunkt stößt, können zwei Dinge passieren:

• Synchrone Skripte: Der Parser hält sofort an.
• Async/defer-Skripte: Sie werden heruntergeladen und in die Warteschlange gestellt, aber nicht ausgeführt.

Der Browser baut die visuelle Hülle der Seite auf: das Layout, die Typografie, die Bilder. Aber die Anwendungslogik bleibt eingefroren. Die Seite liegt vollständig gelayoutet im Speicher und wartet darauf, dass der Nutzer klickt.

Wenn der Klick erfolgt, wird die Seite sofort ausgetauscht. Das JavaScript wird ausgeführt, die Event-Handler werden angehängt und Ihre Analysen werden genau dann ausgelöst, wenn sie es sollen.

Prefetch vs prerender_until_script vs prerender

* Vollständiges Prerendering kann mit document.prerendering vorzeitige Analysen verhindern, aber Sie müssen diesen Code selbst hinzufügen.

Deshalb ist prerender_until_script wichtig. Sie erhalten das Laden von Subressourcen und den DOM-Aufbau eines vollständigen Prerenders, aber ohne die Verfälschung der Analysen und die Speicherkosten der Ausführung von JavaScript. Für Content-Websites mit vielen Drittanbieter-Skripten ist dies der ideale Ansatz.

Die Implementierung

Wir implementieren dies mit der Speculation Rules API. Da prerender_until_script experimentell ist (Origin Trial, Chrome 144 bis 150), benötigen Sie Abwärtskompatibilität.

Browser, die den Schlüssel prerender_until_script nicht erkennen, werden ihn ignorieren. Fügen Sie einen prefetch-Fallback für denselben Satz von URLs hinzu. Chrome wird diese Regeln deduplizieren und die leistungsfähigste verfügbare Aktion anwenden.

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

Der prefetch-Block ist der Fallback. In Browsern, die prerender_until_script unterstützen, wählt Chrome automatisch die leistungsfähigste Aktion. In Browsern, die das nicht tun, wird die prefetch-Regel dennoch ausgeführt. Sie erhalten das bestmögliche Verhalten ohne User-Agent-Sniffing.

Wenn Sie Ihre eigenen Speculation Rules erstellen möchten, nutzen Sie den Speculation Rules Generator.

Wie man prerender_until_script aktiviert

Da dies ein Origin Trial ist, haben Sie zwei Optionen:

1. Registrieren Sie sich für einen Origin Trial Token im Chrome Origin Trials Dashboard. Fügen Sie den Token als <meta>-Tag in Ihren <head> ein: <meta http-equiv="origin-trial" content="YOUR_TOKEN">
2. Testen Sie es lokal, indem Sie zu chrome://flags/#prerender-until-script navigieren und das Flag aktivieren.

Der Origin Trial läuft von Chrome 144 (Januar 2026) bis Chrome 150 (etwa Mitte 2026). Wenn das Chrome-Team es danach als stabiles Feature veröffentlicht, wird der Token nicht mehr benötigt. Der offizielle Chrome-Blogpost enthält alle Details.

Echte Leistungsdaten zu Speculation Rules

Es hat noch niemand Benchmarks für prerender_until_script veröffentlicht (es ist noch zu neu). Aber die breitere Speculation Rules API hat harte Daten aus großen Implementierungen:

• Ray-Ban implementierte Prerender-Speculation Rules und verzeichnete eine 43%ige LCP-Verbesserung auf mobilen Geräten (4,69s auf 2,66s). Die Konversionsraten verdoppelten sich.
• Shopify rollte Prefetch-Speculation Rules über alle Liquid-Storefronts aus und maß bei allen Lademetriken eine 130ms schnellere Zeit auf dem Desktop und 180ms auf Mobilgeräten.
• Cloudflare Speed Brain nutzt Speculation Rules mit einem ML-Vorhersagemodell und meldet eine 45%ige LCP-Reduzierung bei erfolgreichen Prefetches.

Die Akzeptanz wächst schnell. Laut dem 2025 Web Almanac nutzen mittlerweile 35 % der mobilen Websites die Speculation Rules API. Ein Großteil dieses Wachstums stammt von WordPress 6.8, das im März 2025 Speculation Rules in den Kern integriert hat.

prerender_until_script sollte Ergebnisse zwischen Prefetch und vollständigem Prerender liefern. Die Subressourcen sind bereits gecacht und das DOM ist aufgebaut. Die einzige verbleibende Arbeit bei der Aktivierung ist die Skriptausführung. Auf Websites, die von CoreDash überwacht werden, sehe ich typischerweise, dass Speculation Rules den LCP der nachfolgenden Navigation um 30 bis 50 % reduzieren.

Überlegungen

Eagerness: Ich empfehle fast ausschließlich moderate. Dies löst die Spekulation beim Hovern aus (wenn der Zeiger für 200ms verweilt). immediate ist für die meisten Websites zu aggressiv und birgt das Risiko, Bandbreite bei mobilen Verbindungen zu verschwenden.

Ausschlüsse: Seien Sie hier diszipliniert. Spekulieren Sie niemals auf zustandsändernde URLs wie /logout oder /add-to-cart. Obwohl prerender_until_script vor der Skriptausführung schützt, sollten Sie diese Endpunkte nicht einmal unnötig abrufen.

Parser blockieren: Der Parser hält sofort an, wenn er auf ein synchrones <script>-Tag stößt. Wenn Sie Inline-Skripte früh im DOM haben (zum Beispiel <script>loadWhileIdle(chat.js)</script>), wird der Prerender dort stoppen. Verschieben Sie Skripte an das Ende der Seite oder verwenden Sie defer, um zu maximieren, wie viel vom DOM vorab aufgebaut wird.

Inline-Handler: prerender_until_script pausiert nur <script>-Elemente. Inline-Event-Handler auf anderen Elementen (wie <img onload="track()">) werden weiterhin ausgeführt, wenn der Parser sie vor einem blockierenden Skript erreicht. Stellen Sie sicher, dass Ihre Analysen und Ihr Tracking nicht durch Inline-Handler ausgelöst werden.

Sie können Speculation Rules in den Chrome DevTools unter dem Application-Panel debuggen. Das Chrome DevTools Network-Panel zeigt spekulative Abrufe ebenfalls mit einem speziellen Symbol an. Nutzen Sie Real User Monitoring, um die tatsächlichen Auswirkungen auf INP und LCP zu überprüfen, nachdem Sie Speculation Rules in der Produktion bereitgestellt haben.