demo · v141

Quicklink Replacement

The Quicklink library (Google Chrome Labs, ~1.5KB gzipped + IntersectionObserver overhead) implements viewport-aware prefetching in JavaScript. Chrome 141's improved eager mode replicates the same heuristic at network layer — zero bundle cost, better timing, cancels stale prefetches automatically.

checking support…

before — Quicklink in JS

import { listen } from "quicklink";
listen({
  origins: [location.host],
  ignores: [/\\/admin/],
  threshold: 0.4,
  limit: 10,
  throttle: 4,
});
+ works on every browser since IntersectionObserver
+ fine-grained origin / regex filtering
- ships ~1.5KB JS gzipped
- can't see redirect chains; can't cancel after scroll
- prefetches as <link rel=prefetch> — no prerender path

after — built-in eager (141+)

<script type="speculationrules">
{
  "prefetch": [{
    "source": "document",
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/admin/*" } }
      ]
    },
    "eagerness": "eager"
  }]
}
</script>
+ zero JS bundle cost
+ shared cache, smart cancellation, prerender path available
+ honours data-saver / battery / save-data
- only on Chromium 141+ (Quicklink remains a fallback)
bundle saving: ~1.5 KB gzipped + the IntersectionObserver setup cost

migration: ship the speculation-rules script on Chrome 141+, keep Quicklink loaded as a fallback for older browsers. The two cooperate — Chrome ignores the JS prefetches when it's already prefetching at network layer.

the migration

// progressive enhancement: try the platform first
if (HTMLScriptElement.supports?.("speculationrules")) {
  const s = document.createElement("script");
  s.type = "speculationrules";
  s.textContent = JSON.stringify({
    prefetch: [{ source: "document", where: { href_matches: "/*" }, eagerness: "eager" }],
  });
  document.head.appendChild(s);
} else {
  // fall back to Quicklink
  import("quicklink").then((m) => m.listen({ origins: [location.host] }));
}

why this angle

The chromestatus note literally names Quicklink as the JavaScript technique developers were reproducing manually. The new eager behaviour is the platform absorbing a popular library pattern — same heuristic, no bundle cost. The migration code above is the actual pattern most sites should ship: try the platform, fall back to Quicklink, both eventually do the same thing.

see also

scenario focus

Select a scenario to focus its rendered example and summary.