Speculation rules generator
Bouw een speculation rules JSON-script met de regelgenerator
Speculation Rules Generator
Your Rules
No rules saved yet.
Output
Add rules above to generate output.
Speculation Rules Generator
Deze tool bouwt prefetch- en prerender-configuraties voor de Speculation Rules API. Genereer geoptimaliseerde JSON voor de <head> van je document om de navigatieprestaties te verbeteren.
Configuratiegids
Volg dit proces om geldige speculatieregels te bouwen.
Stap 1: Selecteer Strategie
Bepaal hoe de browser de gespeculeerde bron behandelt:
- Prefetch: Downloadt de response body in de achtergrond zonder weergave. Ideaal voor bronnen met een hoge waarschijnlijkheid waarbij het geheugengebruik laag moet blijven.
- Prerender: Downloadt en rendert de pagina volledig (inclusief JavaScript) in een achtergrondtabblad. Zorgt voor een directe overgang bij navigatie.
- Prerender (Until Script): Rendert de DOM en CSS maar pauzeert JavaScript-uitvoering totdat de gebruiker naar de pagina navigeert. Balanceert rendersnelheid met verminderde rekenkosten.
Stap 2: Definieer Triggers
Stel de voorwaarde in die de regel activeert:
- Document: Activeert wanneer de huidige pagina-URL overeenkomt met een gedefinieerd patroon.
- Lijst: Activeert wanneer de huidige pagina-URL voorkomt in een handmatig opgegeven lijst.
Stap 3: Stel Eagerness in
Beheer de timing en prioriteit van de fetch:
- Immediate: Hoogste prioriteit. Haalt op zodra de regel is geparseerd.
- Eager: Identiek aan immediate (fungeert momenteel als alias).
- Moderate: Activeert bij pointer hover (na 200ms) of specifieke pointer down events.
- Conservative: Lage prioriteit. Activeert alleen bij pointer down of touch start.
Stap 4: Doelbronnen
Filter specifieke links voor preloading met behulp van URL-patronen of CSS-selectors:
- Href Matches: Neem URL's op die overeenkomen met deze jokertekenpatronen (bijv. /product/* richt zich op alle links in de productmap).
- Href Does Not Match: Sluit URL's uit die overeenkomen met deze jokertekenpatronen.
- Selector Matches: Neem links op die zijn geïdentificeerd door CSS-selectors (bijv. .nav-link richt zich op navigatie-elementen).
- Selector Does Not Match: Sluit links uit die zijn geïdentificeerd door deze CSS-selectors.
- URL's: Specificeer exacte URL's om te preloaden (alleen vereist wanneer Bron is ingesteld op 'Lijst').
Implementatie
Kopieer de gegenereerde JSON en plaats deze in een <script type="speculationrules"> tag in de <head> van je site. Om te verifiëren, open Chrome DevTools (Ctrl+Shift+I), navigeer naar het Application paneel en selecteer Speculation Rules in de zijbalk.
Voorbeeldconfiguratie
De volgende parameters prerenderen alle productpagina's:
- Modus: Prerender
- Trigger: Document
- Eagerness: Moderate
- Href Matches: /product/*
Deze regel prerendert URL's binnen de /product/ directory met gemiddelde prioriteit (hover/interactie) wanneer een gebruiker een overeenkomende pagina bezoekt.
