Speculative Loading

Was ist Speculative Loading?

Beim Speculative Loading lädt der Browser eine Seite, die der Nutzer noch nicht geöffnet hat, vorab oder rendert sie sogar vollständig, in der Annahme, dass er als Nächstes dorthin geht. Stimmt die Annahme, fühlt sich die nächste Navigation fast sofort an. Stimmt sie nicht, sind Bandbreite und Speicher verschwendet. Der Standardweg dafür im Web ist heute die Speculation Rules API.

Browser-Unterstützung und Status

Sei vorsichtig, bevor du dich darauf verlässt. MDN kennzeichnet die Speculation Rules API als experimentell und nicht Baseline, weil sie in einigen der meistgenutzten Browser nicht funktioniert. Die Chrome-Dokumentation nennt Unterstützung in Chrome und Edge (Prerendering ab Version 109), keine in Firefox und in Safari nur hinter einem Flag. Chrome selbst sagt, vorgerenderte Seiten seien als Hinweis und progressive Erweiterung zu behandeln. Baue die Seite so, dass sie auch ohne funktioniert, und sieh Speculation als Zugabe für unterstützende Browser. Prüfe die aktuellen Kompatibilitätstabellen bei MDN und developer.chrome.com, bevor du dich auf ein Detail hier verlässt.

So funktioniert es: Prefetch und Prerender

Du definierst Regeln in einem <script type="speculationrules">-Block oder in einer externen JSON-Datei, die ein HTTP-Header Speculation-Rules benennt. Zwei Aktionen sind wichtig:

• Prefetch lädt den Antwortkörper des Zieldokuments, aber nicht dessen Unterressourcen. Es ist günstig, und das Ergebnis liegt für die nächste Navigation im Speicher.
• Prerender lädt und rendert die ganze Seite einschließlich JavaScript und Unterressourcen in einem unsichtbaren Tab. Die Aktivierung per Klick ist nahezu sofort, kostet aber Speicher und Bandbreite. MDN rät daher zu sparsamem Einsatz. Vorgerenderte URLs werden zusätzlich per Prefetch geladen.

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/pricing" }, "eagerness": "moderate" }
  ],
  "prefetch": [
    { "urls": ["/docs", "/blog"], "eagerness": "conservative" }
  ]
}
</script>

Regeln gibt es in zwei Formen: eine Liste expliziter urls oder Dokumentregeln (where), die auf Links in der Seite passen. Die Einstellung eagerness bestimmt den Startzeitpunkt. Laut MDN startet immediate so früh wie möglich, eager bei einem leisen Hinweis auf Absicht, moderate wenn ein Link eine Weile überfahren oder fokussiert wird und conservative wenn der Nutzer zu klicken beginnt. Listenregeln nutzen standardmäßig immediate, Dokumentregeln conservative. Setzt deine Seite eine Content Security Policy ein, brauchen Inline-Regeln 'inline-speculation-rules' oder einen Hash bzw. eine Nonce in script-src. Zur Erkennung der Unterstützung dient HTMLScriptElement.supports("speculationrules").

Grenzen und Regeln

• Prerendering ist standardmäßig auf Seiten derselben Origin beschränkt. Cross-Origin-Prerendering innerhalb derselben Site braucht ein Opt-in des Ziels, Cross-Site-Prerendering ist derzeit nicht möglich (MDN).
• Cross-Site-Prefetch funktioniert nur, wenn der Nutzer keine Cookies für die Zielseite gesetzt hat.
• Eine Antwort ohne 2xx (nach Weiterleitungen) verhindert Prefetch und Prerender.
• Chrome behält einen Prefetch etwa fünf Minuten, daher kann Speculation leicht veraltete Inhalte liefern.
• Der Browser kann Speculation ganz überspringen, etwa bei Save-Data, niedrigem Akkustand mit Energiesparmodus oder Speicherknappheit (developer.chrome.com).

Verhältnis zu älteren Hinweisen

Speculation Rules sollen das nur in Chrome vorhandene, veraltete <link rel="prerender"> ablösen. Für das Vorladen ganzer Seiten sollten sie laut MDN, wo unterstützt, <link rel="prefetch"> vorgezogen werden, während <link rel="prefetch"> für Unterressourcen weiter nötig ist. Dazu siehe Resource Prefetching und Resource Hints. Verwechsle das Prerendering im Browser nicht mit dem Prerendering beim Build, bei dem du statisches HTML vorab auf deiner Seite erzeugst.

Typische Fehler

• Spekulieren auf URLs mit Nebenwirkungen. Abmelden, In-den-Warenkorb-Legen, Einmalcodes und Nutzungszähler sollten bei einem spekulativen Laden nicht laufen. MDN empfiehlt, den Header Sec-Purpose (prefetch oder prefetch;prerender) zu prüfen und die Wirkung aufzuschieben.
• Prerenders als Besuche zählen. Analytics und Anzeigen-Impressions können auf einer Seite feuern, die niemand gesehen hat. Schiebe sie bis zur Aktivierung auf, mit document.prerendering und dem Event prerenderingchange.
• Alles vorrendern. Nutze conservative oder moderate und rendere nur Seiten vor, die wahrscheinlich besucht werden.
• Sich darauf verlassen. Ohne Unterstützung in Firefox oder Safari bleibt der erste Klick dort ein normaler Ladevorgang.
• Das Cache-Fenster vergessen. Inhalte, die aktuell sein müssen, brauchen Sorgfalt oder Clear-Site-Data mit prefetchCache bzw. prerenderCache.

Speculative Loading und Performance-Tests

Speculation hilft der nächsten Seite, zeigt sich also als schnellere Navigation, oft im Largest Contentful Paint, auf Seiten, für die spekuliert wurde. Ein Labortest, der eine URL kalt öffnet, profitiert meist nicht davon und misst die Basis, die du weiterhin optimieren solltest. Halte diese Basis zuerst gesund. Das LoadFocus Page-Speed-Monitoring führt Lighthouse-Audits aus 25 Cloud-Regionen aus und verfolgt die Core Web Vitals im Zeitverlauf, und der kostenlose Core-Web-Vitals-Checker liefert eine schnelle Momentaufnahme. Die Grundlagen zu langsamen Seiten findest du unter langsam ladende Seiten beheben (auf Englisch).

Häufige Fragen: Speculative Loading

Wird die Speculation Rules API von allen Browsern unterstützt?

Nein. MDN kennzeichnet sie als experimentell und nicht Baseline. Laut Chrome-Dokumentation unterstützen Chrome und Edge sie, Firefox nicht, und Safari hat sie hinter einem Flag. Nutze sie als progressive Erweiterung.

Was ist der Unterschied zwischen Prefetch und Prerender?

Prefetch lädt nur das HTML der Seite. Prerender lädt und rendert die ganze Seite einschließlich JavaScript in einem verborgenen Tab, damit sie beim Klick sofort angezeigt werden kann.

Kostet Speculative Loading etwas?

Ja. Ungenutzte Speculation verschwendet Bandbreite, Speicher und CPU, beim Besucher und auf deinem Server. Rendere nur Seiten vor, die wahrscheinlich besucht werden.

Kann es meine Analytics stören?

Ja, wenn deine Analytics beim Laden feuern. Eine vorgerenderte Seite führt ihre Skripte aus, bevor der Nutzer sie sieht. Schiebe das Seitenaufruf-Tracking daher bis zur Aktivierung auf.

Ist das dasselbe wie Lazy Loading?

Nein. Lazy Loading verzögert Ressourcen, die die aktuelle Seite noch nicht braucht. Speculative Loading holt Ressourcen für eine Seite, die der Nutzer als Nächstes öffnen könnte.