Direct ladende pagina's met Speculation Rules

Leer hoe je de Core Web Vitals verbetert door pagina's direct te laten laden met de Speculation Rules API.

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2026-02-26

Verbeter de Core Web Vitals direct met de Speculation Rules API

Heb je je ooit afgevraagd waarom sommige pagina's direct lijken te laden? Dat komt waarschijnlijk omdat die pagina Speculation Rules heeft geïmplementeerd!

De Speculation Rules API versnelt toekomstige laadtijden in multi-page applications (MPA's) door ze te prefetchen of zelfs te prerenderen. Developers kunnen speculation rules configureren om de browser te sturen documenten te prefetchen of te prerenderen voor snellere (of directe) laadtijden. Speculation rules vervangen oudere technieken zoals <link rel="prefetch"> voor het prefetchen van resources of de deprecated Chrome-only <link rel="prerender">.

Speculation rules werken op documentniveau, wat ze geschikt maakt voor MPA's met volledige pagina-navigaties. Single-page applications (SPA's) die voornamelijk API calls of gedeeltelijke content updates gebruiken, profiteren minder van deze API voor hun interne route wijzigingen. Toch kunnen speculation rules SPA's helpen door de initiële staat van de applicatie vanaf een landingspagina te prerenderen, wat mogelijk de initiële laadtijd compenseert.

Laatst beoordeeld door Arjen Karel in februari 2026

Speculation Rules QuickStart

Weet je al wat speculation rules zijn? Mooi! Hier zijn wat kant-en-klare snippets om direct te beginnen. Kies de juiste snippet voor jou en plaats deze in de <head> van je pagina (je kunt prerender gerust veranderen in prefetch en/of de eagerness aanpassen)!

<!--
   WordPress speculation rules door corewebvitals.io
   prefetchet alle interne links
   slaat links over die matchen met wp-login, wp-admin, wp content
   slaat links over die het nofollow attribuut hebben
   slaat links over die een query string hebben, bijvoorbeeld: /search?q=welcome
-->
<script type="speculationrules">
{
    "prefetch": [{
        "source": "document",
        "where": {
            "and": [
                { "href_matches": "\\/*" },
                { "not": {
                    "href_matches": [
                        "\\/wp-login.php",
                        "\\/wp-admin\\/*",
                        "\\/*\\\\?*",
                        "\\/wp-content\\/*"
                    ]
                }},
                { "not": {
                    "selector_matches": "a[rel~=\\"nofollow\\"]"
                }}
            ]
        },
        "eagerness": "moderate"
    }]
}
</script>
<!-- Door data-preload getriggerde speculation rules van corewebvitals.io -->
<script type="speculationrules">
{
    "prefetch": [{
        "source": "document",
        "where": {
            "selector_matches": "a[data-preload]"
        },
        "eagerness": "moderate"
    }]
}
</script>

Tip: als je snel je eigen speculation rules moet bouwen, probeer dan de <b>speculation rules generator</b>

Real world impact

Speculation rules zijn niet theoretisch. De grootste namen op het web gebruiken ze al met meetbare resultaten.

Ray-Ban implementeerde prerender rules op hun product listing pagina's met een moderate eagerness. De LCP daalde van 4,69 seconden naar 2,66 seconden op mobiel (43% sneller). Mobiele conversies stegen met 101% en desktop conversies met 156%.

Shopify rolde in juni 2025 een conservative prefetch uit over hun hele platform. Hun A/B tests lieten een gemiddelde verbetering zien van 130ms op desktop en 180ms op mobiel over alle paint metrics.

Cloudflare Speed Brain, gelanceerd in september 2024, voegt standaard speculation rules toe aan alle Cloudflare abonnementen. Sites met succesvolle prefetches zagen een LCP reductie van 45%.

Zelfs Google Search gebruikt speculation rules: zoekresultaten worden geprefetched met een eager eagerness, wat 67ms scheelt op de Android LCP per klik.

Op sites gemonitord door CoreDash hebben geprerenderde navigaties een p75 LCP van 320ms vergeleken met 1.800ms voor standaard navigaties op dezelfde sites. Dat is een verbetering van 82% door een enkele API. Sites die speculation rules gebruiken met moderate eagerness zien ongeveer 28% van de navigaties succesvol geprefetched of geprerenderd. Geprefetchte navigaties laten een p75 TTFB zien van slechts 45ms, omdat de HTML al in de in-memory cache van de browser zit.

Voordelen van Speculation Rules

Verbeterde User Experience (UX): Door content te voorspellen en te preloaden, zorgen Speculation Rules voor vrijwel directe laadtijden, waardoor navigatie naadloos aanvoelt voor gebruikers. Dit evenaart de performance van single-page applications, zelfs voor traditionele multi-page websites zonder de complexiteit en afhankelijkheid van JavaScript. Snellere laadtijden betekenen een betere browsing ervaring, wat waarschijnlijk de gebruikersbetrokkenheid vergroot en bounce rates verlaagt.

SEO Voordelen: Aangezien een betere snelheid een directe ranking factor is en een betere Time to First Byte leidt tot een betere Largest Contentful Paint, zal de implementatie van speculation rules ongetwijfeld de Core Web Vitals verbeteren en je die PageSpeed bonus geven.

Verminderde complexiteit: Vrijwel directe laadtijden waren voorheen alleen mogelijk door een SPA te gebruiken of custom prefetch logica te schrijven voor MPA's. Voor veel use cases is het nadeel van een SPA de initiële opstarttijd, die aanzienlijk kan zijn omdat ze zwaar leunen op JavaScript, en de toegenomen complexiteit in vergelijking met een MPA. Speculation rules hebben deze problemen niet. Dit maakt snel laden haalbaar voor een breder scala aan websites, vooral content-gerichte sites.

De API vereenvoudigt ook het proces van bepalen welke pagina's te prerenderen door veel van de logica aan de browser over te dragen. Dit is een enorme verbetering ten opzichte van eerdere methodes die op JavaScript vertrouwden om deze checks te doen en te preloaden pagina's te injecteren. Browsers kunnen native rekening houden met de context van de gebruiker, zoals weinig geheugen op mobiele apparaten of battery saver mode, wanneer ze beslissen om te prerenderen. Deze dynamische aanpassing helpt resources van de gebruiker te besparen en zorgt voor een soepelere ervaring, zelfs onder beperkingen.

Andere voordelen: De Speculation-Rules HTTP header maakt een makkelijkere uitrol via Content Delivery Networks (CDN's) mogelijk, waardoor je de document content niet direct hoeft aan te passen. Fijnmazige controle met document rules laat developers precieze voorwaarden definiëren voor prefetchen of prerenderen op basis van URL patronen of CSS selectors. Dit vermindert handmatige URL specificatie en maakt site-brede speculation rulesets mogelijk. De "eagerness" instelling geeft fijnmazige controle over wanneer speculation plaatsvindt, waardoor de snelheid van preloaden in balans wordt gebracht met het resource verbruik. Dit helpt onnodig preloaden te verminderen en voorkomt verspilling van resources.

Browser support

Speculation rules worden ondersteund in Chrome 109+, Edge 109+ en alle op Chromium gebaseerde browsers. Dat dekt ruwweg 79% van het wereldwijde browser verkeer volgens Can I Use. Firefox heeft een positieve standards position ingenomen voor het prefetch gedeelte maar heeft nog geen ondersteuning uitgebracht. Safari 26.2 heeft een werkende implementatie achter een flag maar deze staat standaard niet aan.

Voor browsers die geen speculation rules ondersteunen, kun je feature detection gebruiken voor een fallback naar <link rel="prefetch">:

if (HTMLScriptElement.supports &&
    HTMLScriptElement.supports('speculationrules')) {
  // browser ondersteunt speculation rules
} else {
  // fallback: injecteer <link rel="prefetch">
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.href = '/next-page.html';
  document.head.append(link);
}

De werking van Speculation Rules

Speculation rules worden gedefinieerd met een JSON structuur en kunnen op twee manieren worden geïmplementeerd:

  • Inline Script: Voeg de JSON toe binnen een <script type="speculationrules"> tag in de <head> of <body> van het hoofd HTML document.
  • HTTP Header: Lever rules aan via de Speculation-Rules HTTP header in de response van het document. Deze header verwijst naar een JSON bestand met de rules, wat CDN uitrol vergemakkelijkt zonder de HTML content direct aan te passen.

De JSON structuur gebruikt "prefetch" en "prerender" arrays om rules te bevatten voor elk type speculative loading. Elke rule kan verschillende sources gebruiken: een lijst met URL's of document rules.

  • urls (een lijst met URL's): Een array met URL's om te prefetchen of te prerenderen.
  • where (document rules): Een object dat condities gebruikt om te bepalen welke links op de pagina geprefetched of geprerenderd moeten worden.

Elke rule is gedefinieerd als een object dat properties bevat zoals:

  • requires: Een array van strings om restricties in te stellen op speculations. Momenteel is de enige geldige string "anonymous-client-ip-when-cross-origin," wat aangeeft dat een cross-origin prefetch het IP-adres van de client moet anonimiseren.
  • target_hint: Een string die een hint geeft over de navigable target name ("_self" of "_blank"), zodat de user agent het laadproces kan optimaliseren.
  • referrer_policy: Een referrer policy om toe te passen op geprefetchte of geprerenderde URL's.
  • relative_to (alleen voor de "list" source): Bepaalt of de URL's in de "urls" array relatief zijn aan de base URL van het document ("document") of de locatie van het speculation rules JSON bestand ("ruleset").
  • eagerness: Bepaalt hoe agressief de browser moet prefetchen of prerenderen. De beschikbare instellingen zijn "immediate," "eager," "moderate," en "conservative," elk met verschillende triggers.
  • expects_no_vary_search: Een hint die de browser vertelt of de gespeculeerde URL naar verwachting een andere response heeft op basis van de search parameters. Handig voor pagina's met UTM parameters of andere tracking query strings die de content niet veranderen.

Tot slot heeft elke rule een eagerness instelling waarmee je definieert wanneer speculations moeten draaien. Dit scheidt het wanneer speculeren van welke URL's om op te speculeren. De eagerness instelling is beschikbaar voor zowel list als document source rules en heeft vier instellingen: immediate, eager, moderate, en conservative.

  • immediate: Dit wordt gebruikt om zo snel mogelijk te speculeren, zodra de speculation rules worden gezien.
  • eager: Op desktop triggert dit na 10 milliseconden hoveren over een link. Op mobiel (vanaf januari 2026) triggert dit 50ms nadat een link in de viewport komt.
  • moderate: Dit voert speculations uit als je 200 milliseconden over een link hovert (of bij het pointerdown event als dat eerder is, en op mobiel waar geen hover event is).
  • conservative: Dit speculeert bij pointer down of touch down.

Chrome limieten

Chrome hanteert limieten op gelijktijdige speculations om misbruik te voorkomen en resources van het apparaat te beschermen:

  • immediate / eager: Tot 50 prefetches en 10 prerenders.
  • moderate / conservative: Tot 2 prefetches en 2 prerenders (FIFO: nieuwe speculations vervangen de oudste).

Chrome schakelt speculation ook volledig uit wanneer de Save Data mode aan staat, het apparaat in Energy Saver mode zit met een lage batterij, of de gebruiker de "Preload pages" instelling heeft uitgeschakeld.

Prefetch of Prerender

De Speculation Rules API ondersteunt twee primaire vormen van speculative loading: prefetching en prerendering. Hoewel beide technieken kunnen resulteren in snellere laadtijden, verschillen ze in complexiteit en resource verbruik.

  • Prefetching is de lichtere vorm van speculative loading. Het downloadt en cachet de HTML van de target URL zonder de pagina of subresources te renderen. Deze aanpak verbetert vooral de Time to First Byte. Een verbeterde Time to First Byte leidt tot betere paint metrics zoals de Largest Contentful Paint en First Contentful Paint.
  • Prerendering doet veel meer dan alleen het downloaden van de HTML. Het downloadt de HTML, alle subresources en rendert de volledige pagina in een verborgen, onzichtbare tab. Bij navigatie naar deze pagina resulteert dit in een vrijwel directe weergave. Deze techniek verbetert de Largest Contentful Paint op meer manieren dan alleen het verbeteren van de Time to First Byte. Het downloadt en rendert ook het LCP element. Prerendering kan ook de Cumulative Layout Shift elimineren omdat de afmetingen van resources al bekend zijn na het prerenderen.

Er is ook een derde optie: prerender until script. Deze nieuwe feature (Chrome 144, januari 2026) haalt de HTML op, begint met renderen en het laden van subresources, maar pauzeert JavaScript executie bij de eerste blocking script tag. Dit elimineert script side effects (zoals het afvuren van analytics) terwijl CSS, afbeeldingen en fonts nog steeds worden gepreload.

Dus wat is beter? Prerendering of Prefetching? Dat hangt af van de pagina en de gemiddelde bezoeker. Hoewel prerendering by design sneller kan zijn, gebruikt het ook veel meer resources, zowel op de client als op de server. De keuze voor prerendering of prefetching hangt af van:

  • Capaciteiten van het apparaat van de gebruiker: Prerendering is mogelijk niet de beste keuze als een hoog percentage bezoekers via apparaten met beperkt geheugen komt.
  • Specificiteit van de prerender of prefetch rule. Sommige links worden vaker geklikt en sommige pagina's converteren sneller. Die pagina's zijn perfecte kandidaten voor een prerender rule. Andere pagina's zijn misschien meer geschikt voor prefetch.

Ik raad excessief prerenderen af vanwege het resource verbruik, zeker op mobiele apparaten of tragere verbindingen. De potentiële voordelen van prerendering moeten worden afgewogen tegen het risico van performance degradatie en resource verspilling.

De juiste eagerness instellen

Welke eagerness instelling je moet gebruiken hangt af van je site. Voor een hele simpele statische site kan agressiever speculeren weinig kosten en juist voordelig zijn voor gebruikers. Sites met een complexere architectuur en zwaardere pagina payloads doen er goed aan verspilling te beperken door minder vaak te speculeren totdat je een duidelijker signaal van intentie krijgt van gebruikers.

De eagerness instelling in de Speculation Rules API beïnvloedt wanneer een browser content moet prefetchen of prerenderen op basis van voorspelde navigatie van de gebruiker. Deze instelling biedt een trade-off tussen het maximaliseren van de preload voordelen en het minimaliseren van resource verspilling.

De standaard eagerness voor list rules is immediate. De moderate en conservative opties kunnen worden gebruikt om list rules te beperken tot URL's uit een specifieke lijst waar de gebruiker mee interacteert. In veel gevallen zijn document rules met een geschikte where conditie meer op hun plaats.

De standaard eagerness voor document rules is conservative. Aangezien een document uit veel URL's kan bestaan, moet het gebruik van immediate of eager voor document rules met voorzichtigheid worden toegepast.

Bij het configureren van eagerness moeten developers rekening houden met user experience, resource kosten en browser limieten. Over-speculatie kan de bandbreedte, het geheugen en de CPU van de gebruiker belasten, wat mogelijk de performance verslechtert, vooral op beperkte netwerken of apparaten. Daarnaast kunnen factoren zoals user-configured Save Data modes, lage batterijstanden of browser extensies de speculation rules overrulen om zo resources te besparen.

Speculation rules checken en debuggen

Om te checken op speculation rules op een pagina open je Chrome DevTools, ga je naar het Application panel, en navigeer je naar Background Services > Speculative Loads > Speculations. (open het Speculations pane voordat je de pagina laadt die je wilt debuggen) Dit panel geeft informatie over:

  • Het aantal succesvolle speculations.
  • Individuele URL's die worden geprerenderd of geprefetched.
  • De status van elke speculation.

De Network track in het Performance panel toont de netwerkactiviteit rondom geprerenderde resources zonder dat je de DevTools context hoeft te switchen. Bovendien kun je de DevTools context switchen naar een geprerenderde pagina om die als een gewone pagina te inspecteren.

speculative loads inspector devtools

Speculation Rules monitoren en analyseren

  • Real User Monitoring (RUM): Gebruik RUM tools om de daadwerkelijke user experience te meten. Observeer metrics zoals Largest Contentful Paint (LCP) om de impact van speculation rules op laadtijden te beoordelen. Kijk naar verbeteringen in LCP voor geprerenderde pagina's vergeleken met niet-geprerenderde pagina's.
  • A/B Testing: Voer A/B tests uit om verschillende speculation rule configuraties te vergelijken en de meest optimale setup voor jouw specifieke website en gebruikersbestand te bepalen.

speculation rules rum tracking table coredash

Overwegingen

Resource verbruik: Het overgebruiken van speculation kan een negatieve impact hebben op bandbreedte, geheugen en CPU-gebruik. Begin met een conservative of moderate eagerness en monitor de resultaten voordat je deze verhoogt.

Browser Compatibility: Niet alle browsers ondersteunen de Speculation Rules API volledig. Gebruik de feature detection code hierboven om een fallback in te bouwen voor non-Chromium browsers.

Privacy: Developers moeten erop letten hoe speculation rules mogelijk browsepatronen van gebruikers blootleggen en gepaste privacymaatregelen implementeren. Gebruik voor cross-origin prefetch de "anonymous-client-ip-when-cross-origin" requirement om het client IP te maskeren via Chrome's private prefetch proxy.

Analytics: Geprerenderde pagina's voeren JavaScript uit, wat betekent dat analytics scripts afvuren voordat de gebruiker daadwerkelijk navigeert. Google Analytics en Google Publisher Tag handelen dit automatisch af. Voor andere analytics tools moet je de initialisatie uitstellen totdat de pagina is geactiveerd:

if (document.prerendering) {
  document.addEventListener('prerenderingchange', function() {
    initAnalytics();
  }, { once: true });
} else {
  initAnalytics();
}

De Speculation Rules API biedt een krachtige aanpak om de performance en user experience van web applicaties te verbeteren. Door de werking, voordelen en overwegingen te begrijpen, kunnen developers deze API inzetten om snellere en meer boeiende websites te bouwen.

Speculation Rules en WordPress

Sinds WordPress 6.8 (april 2025) zitten speculation rules ingebouwd in de WordPress Core. De standaardconfiguratie gebruikt prefetch met een conservative eagerness, toegepast op alle frontend pagina's wanneer de bezoeker niet is ingelogd en permalinks aan staan.

Het WordPress Core Performance team onderhoudt ook een standalone Speculative Loading plugin (40.000+ actieve installaties) die meer controle biedt. De plugin heeft twee groepen instellingen:

  • Speculation Mode: Kies tussen prefetch en prerender. Prerendering levert snellere laadtijden op dan prefetching. Maar prefetching kan een veiligere keuze zijn voor interactieve content.
  • Eagerness: Kies tussen conservative (meestal bij een klik), moderate (meestal bij hover), of eager (bij de minste suggestie). De eagerness instelling bepaalt hoe snel speculative loads worden getriggerd.

Je kunt specifieke paden uitsluiten van speculation via een PHP filter:

add_filter(
  'plsr_speculation_rules_href_exclude_paths',
  function($paths) {
    $paths[] = '/cart/*';
    $paths[] = '/checkout/*';
    return $paths;
  }
);

Zie onze complete gids voor meer manieren om scripts te deferren en het laden te optimaliseren.

About the author

Arjen Karel is a web performance consultant and the creator of CoreDash, a Real User Monitoring platform that tracks Core Web Vitals data across hundreds of sites. He also built the Core Web Vitals Visualizer Chrome extension. He has helped clients achieve passing Core Web Vitals scores on over 925,000 mobile URLs.

Live data. Geen 28-daags gemiddelde.

CoreDash splitst elke metric uit per route, toestel, browser en verbinding.

Bekijk CoreDash
Direct ladende pagina's met Speculation Rules Core Web Vitals Direct ladende pagina's met Speculation Rules