Speculative loading — Prefetch og prerender af næste side

Speculative loading er en performance-teknik hvor browseren proaktivt henter eller renderer sider brugeren endnu ikke har klikket sig til, baseret på forudsigelse af næste navigation. For SEO og Core Web Vitals er speculative loading relevant fordi det markant forbedrer de navigationstider rigtige brugere oplever — og dermed de field-performance-målinger (CrUX) Google bruger som rankinggrundlag. Speculation Rules API er den moderne implementering der giver præcis kontrol over hvad der spekuleres, hvornår og med hvilken aggressivitet.

Typer af speculative loading

DNS-prefetch er det mindste skridt: opslag af domain-navne tidligt.

Preconnect etablerer TCP/TLS-forbindelsen til et origin.

Prefetch henter det fulde HTML-dokument og cacher det med lav prioritet. Kræver minimalt med ressourcer.

Prerender loader og renderer hele siden inkl. alle ressourcer og JavaScript — som en usynlig browser-tab. Øjeblikkelig navigation ved klik, men ressource-intensivt.

Speculation Rules API

Den moderne implementering via et JSON-format i <script type="speculationrules">:

{
  "prefetch": [
    {
      "source": "document",
      "eagerness": "moderate",
      "where": {
        "href_matches": ["/*"],
        "not": {
          "href_matches": ["*\\?*", "*#*"]
        }
      }
    }
  ],
  "prerender": [
    {
      "source": "document",
      "eagerness": "moderate",
      "where": {
        "href_matches": ["/blog/*", "/ordbog/*"]
      }
    }
  ]
}

Eagerness-niveauer styrer hvornår spekulering trigges:

• conservative — trigger kun ved aktiv hover med tilstrækkelig tid
• moderate — trigger ved hover (ca. 200ms)
• eager — trigger ved link discovery (mere aggressivt)

Hvad browseren spekulerer over

"source": "document" instruerer browseren til at finde links i det aktuelle dokument der matcher where-reglerne. Alternativt kan specifikke URLs hardkodes med "source": "list".

href_matches bruger URL-pattern matching. not-rules undtager URL-mønstre — typisk query strings og hash-links der ikke fører til nye sider.

Ressourceforbrug og hensyn

Prerender er ressourcekrævende: browseren skal allokere hukommelse og CPU til at rendere hele siden. Brug det målrettet på de sider brugere oftest navigerer til — ikke på alle sider.

Analyticsscripts kan håndtere dette: mange analytics-biblioteker detekterer prerender via document.prerendering og udskyder beacons til siden faktisk aktiveres.

Prefetch er mere konservativt og egnet til bredere spekulering. En typisk strategi: prefetch alle interne links på sitet, prerender kun de primære flows (kategori → produktside, artikel → næste artikel).

Browser-support

Speculation Rules API er understøttet i Chromium-browsere (Chrome, Edge, Opera) fra 2023. Firefox og Safari understøtter ikke Speculation Rules endnu (2026) — de ignorerer <script type="speculationrules"> og falder tilbage til normal navigation. Det er progressiv enhancement: browsere der forstår det drager fordel, resten er upåvirket.

<link rel="prefetch"> som fallback er fortsat bredt understøttet men giver ikke prerender-kapabiliteterne. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.