Speculation rules-generator
Maak 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 navigatieprestaties te verbeteren.
Configuratiegids
Volg dit proces om geldige speculation rules te bouwen.
Stap 1: Kies strategie
Bepaal hoe de browser de gespeculeerde resource afhandelt:
- Prefetch: Downloadt de response body op de achtergrond zonder rendering. Ideaal voor resources met een hoge waarschijnlijkheid waarbij het geheugengebruik laag moet blijven.
- Prerender: Downloadt en rendert de pagina volledig (inclusief JavaScript) in een achtergrondtabblad. Biedt een directe overgang bij navigatie.
- Prerender (Until Script): Rendert de DOM en CSS maar pauzeert JavaScript-uitvoering totdat de gebruiker naar de pagina navigeert. Brengt rendersnelheid in balans met lagere rekenkosten.
Stap 2: Definieer triggers
Stel de voorwaarde in die de regel activeert:
- Document: Activeert wanneer de URL van de huidige pagina overeenkomt met een gedefinieerd patroon.
- List: Activeert wanneer de URL van de huidige pagina voorkomt in een handmatig opgegeven lijst.
Stap 3: Stel eagerness in
Bepaal de timing en prioriteit van de fetch:
- Immediate: Hoogste prioriteit. Fetcht zodra de regel is geparst.
- Eager: Identiek aan immediate (werkt momenteel als alias).
- Moderate: Triggert bij pointer hover (na 200ms) of specifieke pointer down events.
- Conservative: Lage prioriteit. Triggert alleen bij pointer down of touch start.
Stap 4: Target resources
Filter specifieke links voor preloading met behulp van URL-patronen of CSS-selectors:
- Href Matches: Neem URL's op die overeenkomen met deze wildcardpatronen (bijv. /product/* target alle links in de productmap).
- Href Does Not Match: Sluit URL's uit die overeenkomen met deze wildcardpatronen.
- Selector Matches: Neem links op die zijn geïdentificeerd door CSS-selectors (bijv. .nav-link target navigatie-elementen).
- Selector Does Not Match: Sluit links uit die zijn geïdentificeerd door deze CSS-selectors.
- URLs: Geef exacte URL's op om te preloaden (alleen vereist als Source is ingesteld op 'List').
Implementatie
Kopieer de gegenereerde JSON en plaats deze in een <script type="speculationrules">-tag in de <head> van je site. Om dit te verifiëren, open je Chrome DevTools (Ctrl+Shift+I), navigeer je naar het Application-paneel en selecteer je Speculation Rules in de zijbalk.
Voorbeeldconfiguratie
De volgende parameters prerenderen alle productpagina's:
- Mode: Prerender
- Trigger: Document
- Eagerness: Moderate
- Href Matches: /product/*
Deze regel prerendert URL's binnen de map /product/ met moderate prioriteit (hover/interactie) wanneer een gebruiker een matchende pagina bezoekt.
