Wat zijn speculation rules? Snellere navigatie uitgelegd

Definitie

De Speculation Rules API laat de browser een volgende pagina alvast ophalen (prefetch) of volledig klaarzetten (prerender). De volgende klik voelt dan direct. Werkt in Chrome en Edge.

Wat zijn speculation rules?

Met een blok JSON in <script type="speculationrules"> vertel je de browser welke links hij vooruit mag laden. Bij prefetch haalt de browser alleen het HTML-document op. Bij prerender laadt hij de hele pagina onzichtbaar, inclusief JavaScript. Klikt de bezoeker, dan verschijnt de pagina meteen.

Je kunt een vaste lijst URL's opgeven (list rules) of regels die links op de pagina matchen (document rules). Met eagerness bepaal je wanneer de browser begint. conservative start bij pointerdown of touch. moderate start op desktop na 200 ms hover. eager en immediate gaan nog eerder. Chrome begrenst het aantal: bij moderate en conservative maximaal 2 tegelijk.

Volgens de Chrome-documentatie wordt de API ondersteund in Chrome en Edge. Firefox ondersteunt het niet, Safari alleen achter een vlag. Het is een progressive enhancement: browsers zonder ondersteuning negeren de regels.

Zo werkt het in Magento/Hyvä, Shopify en Laravel

Shopify heeft sinds juni 2025 speculation rules op alle Liquid-storefronts aangezet, via een Speculation-Rules-header. Volgens de Shopify-documentatie is de standaard prefetch met conservative eagerness. Je kunt in je thema eigen regels toevoegen.

Voor Magento bestaan extensies, zoals Mage-OS ThemeOptimization en een aantal losse modules. In Hyvä kun je ook zelf een speculationrules-blok in de <head> zetten. Sluit dan URL's uit die iets veranderen, zoals /checkout, /customer en links die iets in de winkelwagen leggen.

In Laravel voeg je het blok toe in je Blade-layout. Prerender voert JavaScript uit en kan cookies zetten. Controleer of je analytics een prerender niet als pageview telt; de Chrome-documentatie beschrijft document.prerendering om daarop te wachten.

Veelgemaakte fouten

- Prerender op alles met eagerness immediate. Dat kost bandbreedte en serverkracht, ook voor pagina's die niemand opent.

- Uitloglinks, winkelwagenacties of andere URL's met bijwerkingen niet uitsluiten.

- Vergeten dat je server meer requests krijgt. Bij Magento zonder goed werkende full page cache kan dat merkbaar zijn.

- Verwachten dat het je Core Web Vitals voor de eerste pagina verbetert. Het helpt de volgende navigatie, niet de pagina waar de bezoeker binnenkomt.

Prefetch bij hover, met uitsluitingen

<script type="speculationrules">
{
  "prefetch": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/checkout/*" } },
        { "not": { "href_matches": "/customer/*" } }
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Verder lezen

Gerelateerde begrippen

Back/forward cache (bfcache)LCP (Largest Contentful Paint)Full page cache Core Web Vitals Preload en fetchpriority Cache-Control

Veelgestelde vragen

Wat is het verschil tussen prefetch en prerender?+

Prefetch haalt alleen het HTML-document op. Prerender laadt en rendert de hele pagina onzichtbaar, inclusief JavaScript. Prerender is sneller bij de klik, maar kost meer.

Werkt het in Safari en Firefox?+

Volgens de Chrome-documentatie niet standaard: Firefox ondersteunt het niet, Safari alleen achter een vlag. Daar gedraagt de site zich gewoon zoals zonder speculation rules.

Heeft Shopify dit al aan staan?+

Ja. Volgens de Shopify-documentatie draait sinds juni 2025 op alle Liquid-storefronts prefetch met conservative eagerness. Je kunt daar eigen regels naast zetten.

Speculation Rules API