Was ist die Speculation Rules API?
Links anklicken – und die Seite lädt sofort. Kein Warten, kein Flackern, kein "Sekunde, ich lade mal alles neu". Klingt nach Single Page Application? Fast. Aber eben ohne JavaScript-Framework und ohne SEO-Stress. Die Speculation Rules API ist eine neue Web-Technologie von Google, mit der sich Browserinhalte vorausschauend laden oder sogar vorbereitend rendern lassen – ganz ohne JavaScript-Zauberei. Du gibst dem Browser einfach ein paar Regeln mit: „Diese Seite könnte als Nächstes interessant sein.“ Und der Browser reagiert – still und leise im Hintergrund.
Das funktioniert direkt im HTML – mit einer simplen JSON-Konfiguration im <script type="speculationrules">-Tag. So kann der Browser etwa bei einem Hover auf einen Link im Hintergrund schon den Zielinhalt laden – oder sogar komplett „bereitstellen“, sodass er beim Klick instant angezeigt wird. Klingt unspektakulär? Ist es nicht. Seitenwechsel werden damit gefühlt so schnell wie ein Reiterwechsel in einer App.
Prefetch vs. Prerender – was genau passiert da?
Die Speculation Rules API stellt zwei zentrale Funktionen bereit, mit denen sich Seiteninhalte gezielt vorladen lassen: Prefetch und Prerender. Beide Varianten helfen, Ladezeiten zu reduzieren – aber sie unterscheiden sich deutlich in ihrem Verhalten und ihren Auswirkungen.
Prefetch: Vorausdenken und vorbereiten
Beim Prefetch gibt der Browser einem potenziellen Ziel-Link eine Art „Vorsprung“. Er lädt das HTML-Dokument der verlinkten Seite bereits im Hintergrund, bevor der User überhaupt klickt. Das Besondere: Moderne Browser beginnen dabei oft auch mit dem Caching wichtiger Ressourcen wie CSS, JavaScript oder Bildern – ohne sie auszuführen oder zu rendern.
Die Seite ist dann beim tatsächlichen Klick nicht „neu“, sondern bereits geladen – was sich besonders bei häufig frequentierten Seiten positiv bemerkbar macht.
Wichtig: Die Seite wird zwar geladen, aber nicht ausgeführt – das schützt vor unerwünschten Nebeneffekten bei dynamischem Content.
Prerender: Die ganze Seite im Hintergrund aufbauen
Prerender geht einen Schritt weiter. Hier wird die gesamte Seite vollständig im Hintergrund geladen – inklusive CSS, JavaScript, Fonts, Bilder.
Das Ergebnis: Seitenwechsel ohne Ladezeit, gefühlt wie bei einer App.
Wichtig: Prerendering kostet Server-Ressourcen. Deshalb sollte man gut überlegen, welche Seiten sich wirklich lohnen.
Praxis-Tipp für TYPO3-Projekte:
Beide Varianten lassen sich über einfache Konfigurationen in Templates oder via Page TSConfig integrieren. Besonders spannend für Navigationsbereiche oder Seiten mit klaren Einstiegspfaden.
Eagerness – wie früh soll geladen werden?
Nicht jeder Link auf deiner Website ist gleich wichtig. Und nicht jeder User klickt sofort. Genau hier kommt der „Eagerness“-Parameter der Speculation Rules API ins Spiel: Er steuert, wann ein Link als Kandidat zum Vorladen oder Prerendern betrachtet wird – abhängig vom Verhalten der Nutzer:innen.
Das funktioniert fast wie ein „digitaler Instinkt“ im Browser. Er spürt, wenn jemand einen Link wahrscheinlich bald klickt – und reagiert entsprechend.
Die vier Eagerness-Stufen im Überblick
- immediate: Lädt sofort nach dem Parsen der Seite – unabhängig vom Nutzerverhalten.
- eager: Reagiert schon auf leichtes Interesse (z. B. Hover, langsames Scrollen).
- moderate: Wartet auf deutlichere Signale, z. B. Fokus auf den Link.
- conservative: Nur bei starker Absicht (z. B. fast-Klick oder aktive Interaktion).
Beispiel-Konfiguration
<script type="speculationrules">{ "prerender": [ { "source": "document", "urls": ["/kontakt/", "/leistungen/"], "eagerness": "moderate" } ]}</script>Browser-Support: Wo funktioniert’s?
Die Speculation Rules API ist aktuell experimentell, aber bereits nutzbar – allerdings (noch) nicht überall.
Unterstützt:
- Google Chrome (ab Version 108+)
- Microsoft Edge (basierend auf Chromium)
In Chrome muss ggf. unter chrome://settings/performance → „Standard-Preloading“ aktiviert sein.
(Noch) nicht (vollständig) unterstützt:
- Firefox – kein offizieller Support
- Safari (WebKit) – aktuell nicht implementiert
- Brave, Opera, andere Chromium-Varianten – abhängig von Chrome-Basis, meist deaktiviert
Fallbacks und Progressive Enhancement
Die Speculation Rules API funktioniert als Progressive Enhancement: Unterstützt der Browser sie nicht, ignoriert er das <script type="speculationrules"> einfach – ohne Fehler oder Warnung.
Du kannst sie ohne Risiko einbauen. Funktioniert’s, ist’s schneller. Wenn nicht, bleibt alles wie gehabt.
Mögliche Nachteile & Stolperfallen
So viel Performancegewinn klingt fast zu schön, um wahr zu sein? Ganz ohne Haken kommt auch die Speculation Rules API nicht aus. Wer sie einsetzt, sollte sich über einige technische und strategische Fallstricke bewusst sein.
1. Höhere Serverlast
Wenn viele Seiten gleichzeitig „ins Blaue hinein“ vorgeladen oder gerendert werden, führt das zu:
- Mehr gleichzeitigen Requests
- Höherer Bandbreitennutzung
- Ggf. größerer Server-CPU-Auslastung
Gerade bei stark frequentierten Seiten mit Shared Hosting oder komplexem Cache-Setup (z. B. TYPO3 mit Varnish, CDN, etc.) kann das spürbare Auswirkungen haben.
Tipp: Nur gezielt prerendern (z. B. Hauptnavigation) und eagerness bewusst einsetzen.
2. Nicht für sensible Seiten geeignet
Seiten wie:
- Login-Bereiche
- Warenkorb / Checkout
- Kontoverwaltung oder Payment-Seiten
sollten niemals vorab geladen oder gar gerendert werden. Neben Datenschutzaspekten kann es zu Fehlerzuständen oder Sicherheitsproblemen kommen – z. B. durch abgelaufene Sessions oder vorzeitig ausgelöste Logiken.
Diese Seiten also immer ausschließen.
3. Debugging & Kontrolle
Der Browser macht viel im Hintergrund – aber nicht immer transparent. Manchmal werden Seiten nicht wie erwartet vorgeladen. Häufige Gründe:
- API ist in bestimmten Browsern deaktiviert
- User hat Preloading in den Einstellungen ausgeschaltet
Chrome DevTools-Tipp:
Unter Application → Background Services → Speculative Loads lassen sich geladene Inhalte einsehen und überwachen.
Best Practices im Kurzüberblick
- Nutze moderate oder conservative, wenn du dir unsicher bist.
- Prerender nur statische, häufig genutzte Seiten.
- Vermeide das Vorladen dynamischer, personalisierter oder sicherheitskritischer Inhalte.
- Teste das Verhalten regelmäßig – auch in Verbindung mit Cache und Routing.
Messbarkeit & Einfluss auf Core Web Vitals
Eine schnellere Website ist gut – aber bringt das messbar etwas? Die kurze Antwort: Ja. Richtig eingesetzt, hat die Speculation Rules API direkten Einfluss auf zentrale Metriken wie die Core Web Vitals und die User Experience.
Welche Metriken profitieren?
- INP (Interaction to Next Paint): Seitenwechsel wirkt „instant“, da Rendering im Voraus erfolgt.
- TTFB (Time to First Byte): Browser hat HTML bereits – keine Serverabfrage beim Klick.
- CLS (Cumulative Layout Shift): Kein direkter Einfluss – aber durch flüssigeres Rendering oft stabiler.
- LCP (Largest Contentful Paint): Verbesserte Ladegeschwindigkeit durch vorab geladene Ressourcen.
Besonders INP profitiert stark – ein Wert, den Google ab März 2024 als Core Web Vital offiziell misst und der Ladezeit & Reaktionsfähigkeit kombiniert bewertet.
Wie misst man den Effekt?
- Vorher-Nachher-Test mit Lighthouse oder WebPageTest.org
- Matomo oder Google Analytics
- PageSpeed Insights
Typische Auswirkungen
- Geringere Zeit bis zur sichtbaren Antwort nach dem Klick
- Reduzierte Ladezeit für regelmäßig genutzte Pfade (z. B. Home → Leistungen → Kontakt)
- Positiver Effekt auf Konversionspfade und Absprungraten
Typo3 & Speculation Rules
Obwohl es (noch) keine dedizierte TYPO3-Extension gibt, lässt sich die API einfach über das Page TSConfig, Fluid-Templates oder Custom-Viewhelpers einbinden. Auch TypoScript Conditions lassen sich nutzen, um rules nur auf bestimmten Seiten zu laden.
Fazit & Ausblick
Die Speculation Rules API ist ein eleganter Performance-Hebel für klassische Websites – ganz besonders für TYPO3-Projekte, die nicht auf SPA-Frameworks setzen, aber dennoch schnelle, moderne Nutzererlebnisse bieten wollen. Ohne JavaScript-Overhead, ohne neues Framework – einfach via HTML und ein paar JSON-Regeln. Wer sie strategisch einsetzt, profitiert von:
- deutlich schnelleren Seitenwechseln,
- besseren Core Web Vitals,
- zufriedeneren Nutzer:innen.
Und genau das zählt – ob im E-Commerce, auf der Unternehmenswebsite oder im Blog.
Wie du am besten startest:
- Teste Speculation Rules in einem kleinen Seitenbereich – z. B. bei der Hauptnavigation.
- Miss die Unterschiede, z. B. mit Lighthouse oder DebugBear.
Verfolge reale Verbesserungen in GA4, Matomo oder PageSpeed Insights.
Wir entwickeln digitale Lösungen mit Leidenschaft
Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.
Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:
