Speculation rules generator
Erstellen Sie ein Speculation Rules JSON-Skript mit dem Regelgenerator
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. Generieren Sie optimiertes JSON für den <head> Ihres Dokuments, um die Navigationsleistung zu verbessern.
Konfigurationsleitfaden
Befolgen Sie diesen Prozess, um gültige Spekulationsregeln zu erstellen.
Schritt 1: Strategie wählen
Bestimmen Sie, wie der Browser die spekulierte Ressource behandelt:
- Prefetch: Lädt den Antworttext im Hintergrund herunter, ohne zu rendern. Ideal für Ressourcen mit hoher Wahrscheinlichkeit, bei denen die Speichernutzung gering bleiben muss.
- Prerender: Lädt die Seite vollständig herunter und rendert sie (einschließlich JavaScript) in einem Hintergrund-Tab. Sorgt für einen sofortigen Übergang bei der Navigation.
- Prerender (Until Script): Rendert das DOM und CSS, pausiert aber die JavaScript-Ausführung, bis der Benutzer zur Seite navigiert. Gleicht Rendergeschwindigkeit mit reduzierten Rechenkosten aus.
Schritt 2: Auslöser definieren
Legen Sie die Bedingung fest, die die Regel aktiviert:
- Dokument: Wird aktiviert, wenn die aktuelle Seiten-URL einem definierten Muster entspricht.
- Liste: Wird aktiviert, wenn die aktuelle Seiten-URL in einer manuell bereitgestellten Liste vorhanden ist.
Schritt 3: Eagerness einstellen
Steuern Sie das Timing und die Priorität des Abrufs:
- Immediate: Höchste Priorität. Ruft ab, sobald die Regel geparst ist.
- Eager: Identisch mit Immediate (fungiert derzeit als Alias).
- Moderate: Wird bei Zeiger-Hover (nach 200ms) oder bestimmten Zeiger-Down-Ereignissen ausgelöst.
- Conservative: Niedrige Priorität. Wird nur bei Zeiger-Down oder Touch-Start ausgelöst.
Schritt 4: Zielressourcen
Filtern Sie spezifische Links für das Preloading mithilfe von URL-Mustern oder CSS-Selektoren:
- Href Matches: Schließen Sie URLs ein, die diesen Platzhaltermustern entsprechen (z. B. zielt /product/* auf alle Links im Produktverzeichnis ab).
- Href Does Not Match: Schließen Sie URLs aus, die diesen Platzhaltermustern entsprechen.
- Selector Matches: Schließen Sie Links ein, die durch CSS-Selektoren identifiziert werden (z. B. zielt .nav-link auf Navigationselemente ab).
- Selector Does Not Match: Schließen Sie Links aus, die durch diese CSS-Selektoren identifiziert werden.
- URLs: Geben Sie genaue URLs zum Preloaden an (nur erforderlich, wenn Quelle auf 'Liste' gesetzt ist).
Implementierung
Kopieren Sie das generierte JSON und platzieren Sie es in einem <script type="speculationrules"> Tag im <head> Ihrer Website. Zur Überprüfung öffnen Sie die Chrome DevTools (Strg+Umschalt+I), navigieren Sie zum Bereich Anwendung und wählen Sie Speculation Rules in der Seitenleiste aus.
Beispielkonfiguration
Die folgenden Parameter prerendern alle Produktseiten:
- Modus: Prerender
- Auslöser: Dokument
- Eagerness: Moderate
- Href Matches: /product/*
Diese Regel prerendert URLs im Verzeichnis /product/ mit mittlerer Priorität (Hover/Interaktion), wenn ein Benutzer eine übereinstimmende Seite besucht.
