Speculation Rules API Guide (2026)

Forestil dig et website, hvor det næste klik føles øjeblikkeligt. Ingen white screen. Ingen ventetid. Ingen LCP at optimere. Lyder det som science fiction? Det var det også for et par år siden — men ikke længere.

Med Speculation Rules API kan du i 2026 spekulativt prerendere hele sider i baggrunden, så de er klar i det øjeblik brugeren klikker. Resultatet? LCP-værdier tæt på nul, og Core Web Vitals der nærmest lyver i din favør.

Ærligt talt — første gang jeg så et fuldt prerenderet site i aktion, troede jeg det var en bug. Klikket føltes for hurtigt. Det er den slags performance, der ændrer hvordan brugere opfatter dit produkt. Så lad os dykke ned i, hvordan du selv får det til at fungere.

I denne guide gennemgår vi det hele: fra de første linjer JSON-konfiguration til avancerede dokumentmønstre, eagerness-niveauer, fejlfinding i Chrome DevTools, og de nye 2026-funktioner som prerender until script. Vi kigger også på, hvordan store sites som Ray-Ban og Shopify har målt 40-100% forbedringer i konverteringer.

Hvad er Speculation Rules API egentlig?

Speculation Rules API er en moderne webstandard, der lader dig fortælle browseren, hvilke sider brugeren sandsynligvis vil navigere til næste gang. Browseren kan så enten prefetche (hente HTML-dokumentet på forhånd) eller prerendere (hente og fuldt rendere siden i baggrunden). Når brugeren faktisk klikker, aktiveres den allerede klargjorte side øjeblikkeligt.

Reglerne defineres som JSON inde i et <script type="speculationrules">-element, eller leveres via HTTP-headeren Speculation-Rules. Det erstatter langt på vej de gamle <link rel="prefetch"> og <link rel="prerender">-tags med en mere fleksibel — og betydeligt mere udtryksfuld — API.

Prefetch vs. prerender vs. prerender until script

Prefetch — Browseren henter kun HTML-dokumentet og gemmer det i memory cache. Når brugeren klikker, skal subresources (CSS, JS, billeder) stadig hentes, og siden skal renderes. Lav omkostning, moderat gevinst.
Prerender — Her henter browseren både HTML, alle subresources og renderer hele siden i en skjult fane. Når brugeren navigerer, vises siden øjeblikkeligt med LCP tæt på 0 ms. Høj omkostning, maksimal gevinst.
Prerender until script (ny i 2026) — Et mellemniveau, der starter prerender, men stopper ved første blokerende script. Tilgængelig som origin trial fra Chrome 144. Du får det meste af prerenders fordel uden at køre potentielt dyr JavaScript spekulativt.

Din første speculation rule (cirka 5 minutter)

Den simpleste implementering kræver kun 10 linjer JSON. Tilføj følgende til <head> på alle sider:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "href_matches": "/*"
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Det her fortæller Chrome: "Når brugeren holder pegeren over et internt link i mindst 200 ms, prerender den side." Hvis brugeren klikker, aktiveres den prerenderede side øjeblikkeligt. Resultatet er typisk en LCP under 100 ms — for sider, der ellers tager 2-3 sekunder at indlæse.

Bemærk at where-klausulen med href_matches: "/*" kun matcher samme oprindelse. Cross-origin prerender er kraftigt begrænset af privatlivshensyn (og det er ærligt talt godt sådan).

Eagerness-niveauer i dybden

Den vigtigste indstilling i Speculation Rules API er eagerness. Den bestemmer hvornår browseren skal igangsætte spekulationen — ikke hvilke URL'er. Der findes fire niveauer, og valget mellem dem er ofte forskellen på en god implementering og en der bare brænder bandbredde af.

immediate

Spekulerer så snart reglen er parset. Bruges typisk med urls-lister, hvor du kender de eksakte URL'er. Pas på: kombineret med where-klausuler kan dette starte hundredvis af spekulationer på én gang. Jeg har set en developer ved et uheld DoS'e sin egen staging-server med præcis denne kombination.

eager

Fra Chrome 143 starter eager prerender efter 10 ms hover på desktop. På mobil er adfærden ændret i januar 2026 til at bruge viewport-heuristik. eager er aggressiv, men ikke umiddelbar.

moderate

Prerenderer efter 200 ms hover (eller på pointerdown, hvis det kommer først). Fra august 2025 bruger Chrome på mobil komplekse viewport-heuristikker: 500 ms efter brugeren stopper med at scrolle, for ankerlinks inden for 30% af den vertikale afstand fra forrige pointerdown, og hvor ankrene er mindst 0,5× så store som det største anker i viewportet. Lyder kompliceret, og det er det — men det er også derfor det virker så godt i praksis.

conservative

Prerenderer først ved pointerdown eller touchstart — altså i det øjeblik brugeren begynder klikket. Du får typisk 80-200 ms hovedstart, før click-eventet udløses. Det lyder lidt, men det er nok til at få LCP under 1 sekund på mange sider.

Standardværdier og grænser

Hvis du ikke specificerer eagerness:

Liste-regler (urls) defaulter til immediate
Dokument-regler (where) defaulter til conservative

Chrome håndhæver grænser for samtidige spekulationer:

immediate og eager: op til 50 prefetches og 10 prerenders
moderate og conservative: op til 2 samtidige spekulationer (FIFO)

FIFO-køen betyder, at hvis brugeren hover over et tredje link, annulleres den ældste spekulation. Reglerne genaktiveres dog, hvis brugeren peger på linket igen.

Avancerede dokumentmønstre

Den virkelige styrke i Speculation Rules API ligger i where-klausulen, som lader dig matche links baseret på CSS-selektorer, URL-mønstre og endda kombinationer af begge dele.

Selectorbaseret matching

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "selector_matches": ".product-link" }
        ]
      },
      "eagerness": "moderate"
    },
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "selector_matches": ".no-prerender" } }
        ]
      },
      "eagerness": "conservative"
    }
  ]
}
</script>

Her prerenderes produktlinks aggressivt med moderate, mens alle andre interne links bruger conservative. Links med klassen .no-prerender ekskluderes helt — perfekt til logout-links eller andre URL'er med side-effekter.

URL-listebaseret matching

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["/popular-article", "/checkout", "/help"],
      "eagerness": "immediate"
    }
  ]
}
</script>

Brug det her til kendte high-traffic destinationer som checkout, populære artikler eller næste side i en paginering.

Ekskludering af farlige URL'er

Den absolut vigtigste regel: prerender aldrig URL'er med side-effekter. Det inkluderer:

/logout og auth-relaterede endpoints
Add-to-cart, like-knapper og andre GET-baserede mutationer
Søgesidersultater, der logger forespørgsler
Engangslinks (magic links, e-mailbekræftelser)

Et hurtigt scenarie: forestil dig at en bruger hover over "Log ud" i menuen, og browseren prerenderer det. Pludselig er brugeren logget ud — uden at have klikket. Ikke godt. Sådan undgår du det:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart/add/*" } },
          { "not": { "href_matches": "/admin/*" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

JavaScript og prerender: document.prerendering

En af de største faldgruber: din analytics-kode begynder at logge sidevisninger, før brugeren overhovedet har klikket. Ja, du læste rigtigt — det betyder kunstigt oppustede tal og forvrængede A/B-tests. Løsningen er document.prerendering-API'en, som lader dig udskyde kode indtil siden faktisk aktiveres.

// Tjek om siden bliver prerenderet
if (document.prerendering) {
  document.addEventListener('prerenderingchange', () => {
    // Kør analytics, video autoplay, A/B test-allokering osv.
    initAnalytics();
    startVideoAutoplay();
  }, { once: true });
} else {
  // Siden indlæses normalt
  initAnalytics();
  startVideoAutoplay();
}

Almindelige ting, du bør udskyde:

Page view tracking (Google Analytics, Plausible osv.)
A/B test-allokering — for at undgå at "forbruge" eksperimentet før klikket
Annoncer og impression tracking
Auto-play af video og lyd
WebSocket-forbindelser og polling-loops

Ydelsesmæssig effekt på Core Web Vitals

Speculation Rules API har dokumenteret massiv effekt på Core Web Vitals — særligt LCP, men også INP og CLS forbedres ofte indirekte.

Reelle resultater fra produktion (2025-2026)

Ray-Ban implementerede moderate prerender på produktlister. LCP faldt fra 4,69 s til 2,66 s på mobil (43% hurtigere). Mobilkonverteringer steg 101%, desktop 156%.
Shopify rullede conservative prefetch ud på hele platformen i juni 2025. A/B-tests viste 130 ms gennemsnitlig forbedring på desktop og 180 ms på mobil — på alle paint-metrics.
Google Search bruger eager prefetch på søgeresultater og sparer 67 ms på Android LCP per klik.

Hvorfor LCP nærmer sig nul

Når en side er fuldt prerenderet, er hele rendering-pipelinen allerede kørt: HTML parset, CSS anvendt, billeder dekodet, layout beregnet. Aktiveringen er reelt blot et "swap" af den skjulte fane med den synlige. LCP måles fra det øjeblik, hvor siden bliver synlig — som typisk er <100 ms efter klik.

Levering via HTTP-header

Hvis du ikke kan ændre HTML (fx på CDN-niveau eller for tredjepartsindhold), kan reglerne leveres via en HTTP-header:

HTTP/2 200 OK
Content-Type: text/html
Speculation-Rules: "/speculation-rules.json"

Hvor /speculation-rules.json indeholder:

{
  "prerender": [
    {
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }
  ]
}

Det her er især nyttigt på Cloudflare, Fastly eller andre edge-platforme, hvor du kan tilføje reglen uden at røre origin-serverens HTML overhovedet.

Fejlfinding med Chrome DevTools

Chrome DevTools har dedikeret support til speculation rules. Følg disse trin:

Åbn DevTools (F12 eller Cmd+Option+I)
Gå til Application-fanen
Udvid Background Services i venstremenuen
Klik på Speculative Loads → Speculations
Genindlæs siden

Du ser nu en liste over alle spekulationer, deres status (Pending, Ready, Success, Failure) og årsagen, hvis en spekulation blev afvist. Almindelige fejlkoder:

BlockedByContentSecurityPolicy — CSP forhindrer prerender
LowEndDevice — enheden har for lidt RAM
BatterySaverEnabled — strømsparetilstand er aktiveret
DataSaverEnabled — datasparetilstand er aktiveret
MemoryPressureOnRenderer — for mange faner åbne

Hvornår Chrome ikke spekulerer

Det er vigtigt at vide, at Chrome ikke altid følger dine regler. Spekulationer pauses eller annulleres når:

Energy Saver er aktiveret eller batteriet er lavt
Hukommelsesforbruget er højt
"Preload pages"-indstillingen er deaktiveret (uBlock Origin og andre extensions slår dette fra)
Siden er åbnet i en baggrundsfane
Brugeren har Do Not Track aktiveret (i nogle versioner)

Konsekvensen? Du må aldrig stole på, at en side er prerenderet. Din applikation skal fungere korrekt med eller uden prerender. Det er progressive enhancement i sin reneste form.

Mål, mål, mål — og undgå overspekulation

Det er fristende bare at sætte "eagerness": "immediate" på alt og være færdig. Det er også vejen til en backend-regning der kan få din CFO til at græde. For mange samtidige prerenders kan:

Overbelaste klientens CPU og RAM
Mætte netværksforbindelsen og forsinke den nuværende side
Fordoble eller tredoble dine backend-omkostninger
Forværre INP, fordi browseren er optaget med baggrundsrendering

Anbefalet udrulningsstrategi (testet i flere produktionsmiljøer):

Uge 1: Start med conservative prefetch på alle interne links
Uge 2-3: Mål LCP, INP, server load og konverteringer
Uge 4: Opgrader high-confidence stier til moderate prerender (fx produkt-til-checkout-flow)
Uge 5-6: Tilføj eager kun for de URL'er, der har overlegen click-through rate

Brug Real User Monitoring (RUM) som SpeedCurve, DebugBear eller det indbyggede web-vitals-bibliotek til at sammenligne LCP/INP før og efter. Uden måling fyrer du i blinde.

Browser-understøttelse i 2026

Per maj 2026 er Speculation Rules API understøttet i:

Chrome 109+ (basis prefetch), Chrome 121+ (fuld prerender)
Edge 109+
Opera 95+
Brave (med opt-in i indstillinger)

Firefox og Safari har endnu ikke implementeret API'en. Den gode nyhed er, at det er en progressive enhancement — browsere uden support ignorerer simpelthen <script type="speculationrules">-blokken. Brugere på Safari får standard-oplevelsen; Chrome-brugere får boost. Ingen polyfill nødvendig, ingen feature detection. Bare lige til at smide ind.

Komplet produktionsklar konfiguration

Her er en konfiguration, der dækker de fleste use cases for et typisk e-commerce eller indholdssite:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/admin/*" } },
          { "not": { "href_matches": "/api/*" } },
          { "not": { "selector_matches": "[data-no-prerender]" } },
          { "not": { "selector_matches": ".external-link" } }
        ]
      },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/api/*" } }
        ]
      },
      "eagerness": "conservative"
    }
  ]
}
</script>

Denne opsætning prefetcher alle interne links ved pointerdown (lav omkostning, bred dækning) og prerenderer mere selektivt ved 200 ms hover. Logout, admin og API-endpoints er udelukket. Det er det jeg ville starte med på et nyt projekt — og så tune derfra baseret på data.

Almindelige faldgruber og løsninger

Faldgrube 1: Analytics dobbelttæller

Hvis du ikke bruger document.prerendering, vil GA4, Plausible og lignende registrere besøget, så snart prerender starter — selv hvis brugeren aldrig klikker. Løsning: pak alt analytics-init i en prerenderingchange-listener.

Faldgrube 2: Cookie-banner vises på prerenderet side

GDPR-bannere må ikke vises før brugeren faktisk navigerer. Løsning: tjek document.prerendering i din consent-manager og udskyd visningen.

Faldgrube 3: 404 på prerenderede sider

Hvis prerender returnerer en fejl, ser brugeren intet — men din server logger en 404. Det giver støjende error-rapporter. Løsning: filtrer Sec-Purpose: prefetch;prerender-headeren ud af dine 404-rapporter.

Faldgrube 4: Backend overbelastes

Hvert prerender = en ekstra request til serveren. Et site med 1 mio. besøg/dag og moderate prerender kan opleve 1,5-2× backend-trafik. Løsning: implementér aggressiv HTTP-caching, CDN-edge-cache, og overvej conservative i stedet hvis omkostningerne løber løbsk.

FAQ — ofte stillede spørgsmål

Forbedrer Speculation Rules API faktisk Core Web Vitals?

Ja, særligt LCP forbedres dramatisk på prerenderede sider — typisk til under 100 ms. INP og CLS forbedres ofte indirekte, fordi siden allerede er fuldt rendret før aktivering. Husk dog at måle med RUM, da feltdata afspejler virkelige forhold (cache state, netværk, enhed). Lab-tests kan let snyde dig her.

Kan jeg bruge prerender på cross-origin sider?

Cross-origin prerender er stærkt begrænset af privatlivshensyn. Du kan prefetche cross-origin (kun selve dokumentet, ingen subresources), men fuld prerender kræver oftest, at destinationen sender en Supports-Loading-Mode: credentialed-prerender-header. Hold dig til same-origin for de fleste use cases.

Er prerender det samme som det gamle <link rel="prerender">?

Nej, det er en helt ny implementering. Det gamle <link rel="prerender"> blev fjernet for år tilbage på grund af for høje omkostninger og lav præcision. Det moderne Speculation Rules API har fingranuleret eagerness-kontrol, dokumentmønstre, og bruger memory cache i stedet for disk cache. Det er hurtigere, mere forudsigeligt og langt mere konfigurerbart.

Hvad sker der hvis brugeren har en langsom forbindelse?

Chrome respekterer Save-Data-headeren og deaktiverer automatisk spekulationer på meget langsomme forbindelser. Du kan også eksplicit tjekke navigator.connection.saveData i din egen kode og undlade at injicere reglerne, hvis brugeren har dataspare aktiveret.

Hvor mange ressourcer bruger prerender på serveren?

Hver prerender koster et fuldt request — det er identisk med et almindeligt sidebesøg fra serverens perspektiv. På sites med høj trafik kan dette betyde 50-100% mere belastning, hvis alle interne links prerenderes. Brug conservative eagerness eller stol på CDN-caching for at holde omkostninger nede.

Konklusion

Speculation Rules API er et af de mest effektive performance-værktøjer, der er kommet til webplatformen i 2026. Implementeret korrekt giver det dramatisk bedre LCP, højere konverteringer og en oplevelse, der føles fundamentalt anderledes — som en native app frem for et website.

Start småt: tilføj conservative prefetch i denne uge, mål effekten i 2-3 uger, og opgrader gradvist til moderate prerender på dine vigtigste flows. Husk at udskyde analytics med document.prerendering, ekskludér farlige URL'er, og hold øje med server-belastning.

Den webplatform, der venter brugeren i 2026, er øjeblikkelig — og Speculation Rules API er nøglen.