Browser Speculation Rules

Updated on

Speculation rules are still experimental (not supported by all browsers).

If you have a small site, just add rel="prefetch" to each page you want to prefetch. See rel=prefetch on MDN.

For larger sites, you can use a speculation script. The following example prefetches all internal links with moderate eagerness:

<script type="speculationrules">

{
  "prefetch": [
    {
      "source": "document",
      "where": {
      "href_matches": "/*/",
      "relative_to": "document"
    },
    "eagerness": "moderate"
    }
  ]
}

</script>

Further reading: Speculation Rules on MDN.

Framework alternatives

I usually build with Astro, so I use its Prefetch feature.

Cloudflare issue

Cloudflare refuses resources fetched with speculation rules. Tried turning off Speed Brain. Didn't fix it.

Also see: https://community.cloudflare.com/t/cdn-cgi-speculation-applies-even-if-disabled/714033/4.