Die neue Prerender Until Script Speculation Rule

Origin Trial Status: Dieses Feature ist derzeit ein Origin Trial. Um es zu implementieren, müssen Sie sich für einen Origin Trial Token registrieren oder es lokal über chrome://flags aktivieren. Trotz seines experimentellen Charakters zeigen frühe Rückmeldungen aus der Engineering-Community außergewöhnliche Stabilität und  Leistungsverbesserungen.

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 bei der Web-Performance. Egal wie sehr wir unseren Critical Rendering Path optimieren oder Kilobytes von unseren Bundles abschneiden, wir sind letztendlich an die Gesetze der Physik und die Round-Trip-Time (RTT) des Netzwerks gebunden.

Seit langer Zeit versuchen wir, diese Gesetze mit Speculative Loading zu umgehen: zu erraten, wohin der Benutzer als nächstes gehen wird, und es vorher zu laden. Bis jetzt hatten wir zwei Hauptwerkzeuge, und keines war perfekt:

• prefetch: Sicher und leichtgewichtig, aber es ruft nur das HTML ab. Der Browser muss nach dem Klick immer noch parsen, das DOM aufbauen und Unterressourcen (CSS, Bilder) entdecken. Es löst das Netzwerk-Warten, 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 sofortig, aber es ist teuer. Es frisst Bandbreite, verbraucht Speicher und, was am schlimmsten ist, es löst "Seiteneffekte" aus, feuert Analytics-Pixel und führt Code für Seiten aus, die der Benutzer möglicherweise nie tatsächlich sieht.

Wir brauchten offensichtlich einen Mittelweg. Wir brauchten die visuelle Bereitschaft eines Prerenders ohne die Rechenkosten und das Risiko der Ausführung von Anwendungslogik.

prerender_until_script.

Die Genialität von prerender_until_script liegt darin, wie es Parsing von der Ausführung entkoppelt.Wenn Sie diese spezifische Speculation Rule verwenden, weisen Sie den Browser an:

• Das Dokument abzurufen (wie ein Prefetch).
• Den HTML-Stream zu parsen und das DOM zu konstruieren.
• Den Preload Scanner laufen zu lassen. Dies ist der entscheidende Teil. Der Browser entdeckt und lädt Unterressourcen wie CSS mit hoher Priorität und das LCP-Bild herunter.

Sobald der Parser jedoch auf einen JavaScript-Ausführungspunkt trifft, können 2 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 lässt die Anwendungslogik eingefroren. Die Seite sitzt im Speicher, chemisch stabil, und wartet darauf, dass der Benutzer klickt.

Wenn der Klick passiert, wird die Seite sofort eingewechselt und der "Pausiert"-Status wird aufgehoben. Das JavaScript wird ausgeführt, die Event-Handler werden angehängt und Ihre Analytics feuern genau dann, wenn sie sollten.

Die Implementierung

Wir implementieren dies mit der Speculation Rules API. Da prerender_until_script ein experimentelles Feature ist (landet in Chrome 144), müssen wir Abwärtskompatibilität sicherstellen.

Browser, die den Schlüssel prerender_until_script nicht erkennen, werden ihn ignorieren. Daher definiert eine verantwortungsvolle Implementierung einen Prefetch-Fallback für denselben Satz von URLs. Chrome wird diese Regeln automatisch deduplizieren und die fähigste verfügbare Aktion anwenden.

Hier ist die JSON-Struktur für eine produktionsreife Implementierung::

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

Tipp: Wenn Sie schnell Ihren eigenen benutzerdefinierten Satz von Speculation Rules generieren möchten, können Sie den Speculation Rules Generator verwenden

Überlegungen

Eagerness: Ich empfehle fast ausschließlich moderate. Dies löst die Spekulation beim Hovern aus (genauer gesagt, wenn der Zeiger 200ms verweilt). immediate ist für die meisten Implementierungen zu aggressiv und riskiert, Benutzerbandbreite auf mobilen Verbindungen zu verschwenden.

Ausschlüsse: Sie müssen hier diszipliniert sein. Spekulieren Sie niemals auf zustandsändernde URLs wie /logout oder /add-to-cart. Während prerender_until_script vor Skriptausführung schützt, diktiert eine gute Architektur, dass wir diese Endpunkte nicht einmal unnötig abrufen sollten.

Schwäche (Parser Blocking): Der Parser hält sofort an, wenn er auf ein synchrones <script>-Tag trifft. Dies macht Verbesserungen wie <script>loadWhileIdle(chat.js)</script> zunichte, wenn sie früh im DOM erscheinen. Möglicherweise müssen Sie vorhandenen Code refaktorisieren, um diese Skripte am Ende der Seite zu platzieren.

Inline Handler: Beachten Sie, dass prerender_until_script nur <script>-Elemente pausiert. Inline-Event-Handler auf anderen Elementen (z. B. <img onload="track()">) werden trotzdem ausgeführt, wenn der Parser sie vor einem blockierenden Skript erreicht. Stellen Sie sicher, dass Ihre Analytics-Pixel und Tracking-Logik während der Spekulationsphase nicht durch diese Inline-Handler ausgelöst werden.