Veröffentlicht: 23. Januar 2026
Ab Chrome 144 startet Chrome einen neuen Ursprungstest für die Ergänzung prerender until script der Speculation Rules API. 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 Seitenladevorgänge 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 verbessert. Es werden keine untergeordneten Ressourcen (z. B. CSS, JavaScript oder Bilder) geladen und kein JavaScript ausgeführt. Daher muss der Browser beim Laden der Seite möglicherweise noch einiges leisten.
Prerender kann aber noch viel mehr. Dabei werden die untergeordneten Ressourcen abgerufen und die Seite wird gerendert und JavaScript 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. Das kann zu verzerrten Statistiken führen.
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 spekulieren, dann etwas in den Einkaufswagen legen und anschließend die zuvor spekulierte Seite laden, 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 weiter nutzen möchten, um noch mehr davon zu profitieren. Hier kommt das Script „Prerender until“ ins Spiel.
Was ist „Vorrendern bis zum Skript“?
„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-Skripts). Wenn ein blockierendes <script>-Tag gefunden wird, wird der Parser angehalten und gewartet, 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 den Attributen async oder defer 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.
„Prerender until script“ verwenden
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>
Das Vorrendern erfolgt, bis das Skript mit den üblichen Speculation Rules API-Optionen verwendet werden kann, 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 auf Prerender bis Script mit mehr Signalen zu aktualisieren, wie zuvor mit 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-bis-Script auf diese Weise nicht auf ein vollständiges Prerender-Script upgraden. Wenn Sie möchten, dass Chrome dieses Muster unterstützt, geben Sie diesem Fehler einen 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-Skripthandler, in denen zuvor definierter Code verwendet wird. Dieser funktioniert weiterhin wie erwartet:
<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.
„Bis zum Skript vorrendern“ aktivieren
„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.
Die Funktion „Vorrendern bis zum Script“ ist ab Chrome 144 als Ursprungstest verfügbar. Mit Origin Trials 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 im GitHub-Repository Feedback zum Vorschlag. Wenn Sie Feedback zur Implementierung in Chrome geben möchten, erstellen Sie einen Chromium-Fehler.