Speculation-Rules-Generator
Erstelle ein Speculation-Rules-JSON-Skript mit dem Regel-Generator.
Speculation Rules Generator
Your Rules
No rules saved yet.
Output
Add rules above to generate output. Speculation Rules Generator
Dieses Tool erstellt Prefetch- und Prerender-Konfigurationen für die Speculation Rules API. Generiere optimiertes JSON für den <head> deines Dokuments, um die Navigations-Performance zu verbessern.
Konfigurationsanleitung
Folge diesem Prozess, um gültige Speculation Rules zu erstellen.
Schritt 1: Strategie wählen
Lege fest, wie der Browser die spekulierte Ressource behandelt:
- Prefetch: Lädt den Response-Body im Hintergrund ohne Rendering herunter. Ideal für hochwahrscheinliche Ressourcen, wenn der Speicherverbrauch niedrig bleiben muss.
- Prerender: Lädt und rendert die Seite (inklusive JavaScript) vollständig in einem Hintergrund-Tab. Bietet einen sofortigen Übergang bei der Navigation.
- Prerender (Until Script): Rendert das DOM und CSS, pausiert aber die JavaScript-Ausführung, bis der Nutzer zur Seite navigiert. Balanciert Render-Geschwindigkeit mit reduzierten Rechenkosten.
Schritt 2: Trigger definieren
Lege die Bedingung fest, die die Regel aktiviert:
- Document: Aktiviert, wenn die URL der aktuellen Seite einem definierten Muster entspricht.
- List: Aktiviert, wenn die URL der aktuellen Seite in einer manuell bereitgestellten Liste existiert.
Schritt 3: Eagerness festlegen
Steuere den Zeitpunkt und die Priorität des Fetches:
- Immediate: Höchste Priorität. Lädt, sobald die Regel geparst wird.
- Eager: Identisch zu Immediate (fungiert aktuell als Alias).
- Moderate: Löst bei Pointer Hover (nach 200ms) oder eindeutigen Pointer-Down-Events aus.
- Conservative: Niedrige Priorität. Löst nur bei Pointer Down oder Touch Start aus.
Schritt 4: Zielressourcen definieren
Filtere spezifische Links fürs Preloading über URL-Muster oder CSS-Selektoren:
- Href Matches: Schließt URLs ein, die diesen Wildcard-Mustern entsprechen (z. B. erfasst /product/* alle Links im Produktverzeichnis).
- Href Does Not Match: Schließt URLs aus, die diesen Wildcard-Mustern entsprechen.
- Selector Matches: Schließt Links ein, die durch CSS-Selektoren identifiziert werden (z. B. erfasst .nav-link Navigations-Elemente).
- Selector Does Not Match: Schließt Links aus, die durch diese CSS-Selektoren identifiziert werden.
- URLs: Gib exakte URLs fürs Preloading an (nur erforderlich, wenn Source auf 'List' steht).
Implementierung
Kopiere das generierte JSON und platziere es innerhalb eines <script type="speculationrules">-Tags im <head> deiner Seite. Zur Überprüfung öffne die Chrome DevTools (Strg+Umschalt+I), navigiere zum Application-Panel und wähle Speculation Rules in der Seitenleiste.
Beispiel-Konfiguration
Die folgenden Parameter prerendern alle Produktseiten:
- Mode: Prerender
- Trigger: Document
- Eagerness: Moderate
- Href Matches: /product/*
Diese Regel prerendert URLs innerhalb des /product/-Verzeichnisses mit moderater Priorität (Hover/Interaktion), wenn ein Nutzer eine passende Seite besucht.
