Vorrendern von Spekulationsregeln bis zum Ursprungstest für Skript

Veröffentlicht: 23. Januar 2026

In Chrome 144 wird ein neuer Ursprungstest für die prerender until script-Ergänzung der Speculation Rules API gestartet. Mit diesem Ursprungstest können Websites die neue Funktion mit echten Nutzern testen. Ziel ist es, die Funktion in der Praxis zu testen und dem Chrome-Team Feedback zu geben, damit es die Funktion weiterentwickeln und entscheiden kann, ob sie in die Webplattform aufgenommen werden soll.

Welches Problem soll damit gelöst werden?

Mit der Speculation Rules API können Seiten geladen werden, bevor Nutzer tatsächlich zu den Seiten navigieren. Dadurch können zukünftige Seitenaufrufe beschleunigt werden, da einige oder alle Aufgaben im Voraus erledigt werden. Bisher waren zwei Arten von Spekulationen möglich: Prefetch und Prerender.

Beim Prefetching wird nur das HTML-Dokument abgerufen. So wird die erste wichtige Ressource vorab abgerufen, was die Leistung beim Aufrufen einer URL steigert. Es werden keine untergeordneten Ressourcen (z. B. CSS, JavaScript oder Bilder) geladen und kein JavaScript ausgeführt. Daher muss der Browser beim Laden von Seiten möglicherweise noch einiges leisten.

Prerender kann aber noch viel mehr. Die Unterressourcen werden abgerufen und die Seite wird gerendert und JavaScript wird ausgeführt, fast so, als ob die Seite in einem verborgenen Hintergrundtab geöffnet würde. Wenn der Nutzer auf den Link klickt, kann er sofort navigieren, sofern der Browser alle erforderlichen Schritte zum Rendern der Seite abgeschlossen hat.

Die Verwendung der Prerender-Option ist potenziell viel besser für die Leistung, verursacht aber zusätzliche Implementierungs- und Ressourcenkosten. Wenn dies nicht sorgfältig berücksichtigt wird, kann es auch zu unerwarteten Nebenwirkungen kommen, wenn eine Seite vollständig vorgerendert wird, bevor ein Nutzer tatsächlich zur Seite navigiert. Wenn der Analytics-Anbieter Spekulationen nicht berücksichtigt, kann es beispielsweise sein, dass Analytics ausgelöst wird, bevor ein Nutzer navigiert, was zu verzerrten Statistiken führt.

Bei Websites, die Prerendering verwenden, muss darauf geachtet werden, dass Nutzern keine veraltete Seite präsentiert wird. Wenn Sie beispielsweise eine Seite auf einer E-Commerce-Website vorab laden, dann etwas in den Einkaufswagen legen und dann die zuvor vorab geladene Seite aufrufen, sehen Sie möglicherweise die alte Menge im Einkaufswagen, wenn die Website nicht dafür sorgt, dass diese aktualisiert wird.

Diese Komplikationen treten auch beim Prefetching auf, wenn ein Teil der Statusverwaltung serverseitig erfolgt. Sie sind jedoch oft ein größeres Problem beim Prerendering. Die Verwendung von Prerendering auf komplexeren Websites kann komplizierter sein.

Wir haben jedoch von Entwicklern gehört, dass sie bereits Leistungssteigerungen durch das Vorabrufen der Seite sehen und die Spekulationsregeln noch weiter nutzen möchten, um noch mehr zu profitieren. Hier kommt prerender until script ins Spiel.

Was ist prerender until script?

prerender until script ist ein neuer Mittelweg zwischen Prefetch und Prerender. Das HTML-Dokument wird wie beim Prefetching vorab abgerufen. Anschließend wird die Seite gerendert und alle untergeordneten Ressourcen werden abgerufen (wie beim Prerendering). Der Browser führt jedoch keine <script>-Elemente aus (sowohl für Inline- als auch für src-Scripts). Wenn der Parser auf ein blockierendes <script>-Tag trifft, wird er angehalten und wartet, bis der Nutzer die Seite aufruft, bevor er fortfährt. In der Zwischenzeit kann der Preload-Scanner fortfahren und Unterressourcen abrufen, die für die Seite benötigt werden. Sie sind dann verfügbar, wenn das Laden der Seite fortgesetzt werden kann.

Wenn Sie blockierende <script>-Elemente zurückhalten, wird ein Großteil der Implementierungskomplexität vermieden. Gleichzeitig wird durch das Starten des Rendering-Prozesses und das Abrufen der untergeordneten Ressourcen ein großer Vorteil gegenüber dem Prefetching erzielt – potenziell fast so viel wie beim vollständigen Prerendering.

Im besten Fall (wenn auf der Seite überhaupt keine Scripts vorhanden sind) wird mit dieser Option die gesamte Seite vorgerendert. Wenn eine Seite nur Skriptelemente in der Fußzeile oder nur Skripts mit async- oder defer-Attributen enthält, wird die Seite vollständig ohne dieses JavaScript vorgerendert. Selbst im schlimmsten Fall (wenn sich ein blockierendes Skript in <head> befindet) sollte das Starten des Seitenrenderings und insbesondere das Prefetching der untergeordneten Ressourcen zu einem deutlich schnelleren Seitenaufbau führen.

Wie verwende ich prerender until script?

Aktivieren Sie zuerst die Funktion. prerender until script wird dann auf dieselbe Weise wie die anderen Optionen der Speculation Rules API mit einem neuen prerender_until_script-Schlüssel verwendet. Beachten Sie die Unterstriche, damit es sich um einen gültigen JSON-Schlüsselnamen handelt.

Kann mit Listenregeln für statische URLs verwendet werden:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

Sie kann auch mit Dokumentregeln verwendet werden, bei denen die zu spekulierenden URLs als Links auf der Seite verfügbar sind:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

prerender until script kann dann mit den üblichen Speculation Rules API-Optionen verwendet werden, einschließlich der verschiedenen Eagerness-Werte.

Da JavaScript nicht ausgeführt wird, kann document.prerendering nicht gelesen werden, ebenso wenig wie das prerenderingchange-Ereignis. Die activationStart-Zeit ist jedoch ungleich null.

Das folgende Beispiel zeigt, wie das vorherige Beispiel mit einem Fallback auf Prefetch für Browser bereitgestellt wird, die prerender_until_script nicht unterstützen:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }],
  "prefetch": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

Chrome verarbeitet diese Duplizierung problemlos und führt für jede Eagerness-Einstellung die am besten geeignete Regel aus.

Alternativ können Sie diese mit verschiedenen Eagerness-Stufen verwenden, um eifrig vorab abzurufen und dann mit mehr Signalen auf prerender until script zu aktualisieren, wie zuvor bei Prefetch/Prerender vorgeschlagen:

<script type="speculationrules">
{
  "prefetch": [{
    "where": { "href_matches": "/*" },
    "eagerness": "eager"
  }],
  "prerender_until_script": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

Hinweis: Sie können ein prerender until script auf diese Weise nicht auf ein vollständiges Prerendering upgraden. Wenn Sie jedoch möchten, dass Chrome dieses Muster unterstützt, markieren Sie diesen Fehler mit einem Stern.

Ist alles JavaScript pausiert?

Nein, nur <script>-Elemente führen dazu, dass der Parser pausiert wird. Das bedeutet, dass Inline-Skripthandler (z. B. onload) oder javascript:-URLs keine Pause verursachen und möglicherweise ausgeführt werden.

So kann beispielsweise Hero image is now loaded in der Konsole protokolliert werden, bevor die Seite aufgerufen wird:

<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

Wenn der Ereignis-Listener mit einem <script> hinzugefügt wird, wird Hero image is now loaded erst nach der Aktivierung der Seite in der Konsole protokolliert:

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

Das mag kontraintuitiv erscheinen, aber in vielen Fällen (wie im vorherigen Beispiel) ist es wahrscheinlich besser, die Maßnahme sofort zu ergreifen. Eine Verzögerung kann zu unerwarteten Komplikationen führen.

Außerdem erfordern die meisten Inline-Ereignisse eine Nutzeraktion (z. B. onclick, onhover) und werden daher erst ausgeführt, wenn der Nutzer mit der Seite interagieren kann.

Schließlich wird der Parser durch vorherige blockierende Skripts pausiert, sodass die Inline-Event-Handler nicht erkannt werden. Die Nachricht wird also erst nach der Aktivierung in die Konsole geladen, obwohl es sich um einen Inline-Event-Handler handelt:

<script>...</script>
<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

Das ist besonders wichtig für Inline-Skript-Handler, in denen zuvor definierter Code verwendet wird, der weiterhin wie erwartet funktioniert:

<script>
imageLoadFunction() = {
   ...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">

Was ist mit Skripts mit den Attributen async und defer?

Skripts mit den Attributen async und defer werden bis zur Aktivierung verzögert, blockieren aber nicht, dass der Parser den Rest der Seite weiter verarbeitet. Die Skripts werden heruntergeladen, aber erst ausgeführt, wenn die Seite aufgerufen wird.

Wie aktiviere ich prerender until script?

prerender until script ist eine neue Option, an der wir arbeiten. Sie kann sich noch ändern und ist daher nicht verfügbar, ohne dass sie zuerst aktiviert wird.

Sie kann lokal für Entwickler mit dem Chrome-Flag chrome://flags/#prerender-until-script oder mit dem Befehlszeilen-Flag --enable-features=PrerenderUntilScript aktiviert werden.

prerender until script ist ab Chrome 144 auch als Ursprungstest verfügbar. Mit Ursprungstests können Websiteinhaber eine Funktion auf ihren Websites für echte Nutzer aktivieren, ohne dass diese sie manuell aktivieren müssen. So lässt sich die Wirkung der Funktion auf echte Nutzer messen, um sicherzustellen, dass sie wie erwartet funktioniert.

Testen Sie die Funktion und geben Sie Feedback

Wir freuen uns sehr über diese vorgeschlagene Ergänzung der Speculation Rules API und empfehlen Websiteinhabern, sie auszuprobieren.

Geben Sie uns im GitHub-Repository Feedback zum Vorschlag. Wenn Sie Feedback zur Implementierung in Chrome geben möchten, erstellen Sie einen Chromium-Fehler.