Prefetch

Resource prefetching

Resources should be prefetched based on how likely it is that they will be needed in a future navigation. Browsers can infer this automatically for some resources, such as the current URL in the address bar.

This can be done using <link rel="prefetch"> (the Speculation Rules API only handles document prefetches for navigations):

<link rel="prefetch" href="next.html" />

Document prefetching

Developers can provide hints to the browser of navigations that should be prefetched in a couple of different ways:

<link rel="prefetch">:

<link rel="prefetch" href="next.html" />

Speculation Rules API prefetch:

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html"]
      }
    ]
  }
</script>

The Speculation Rules API handles document prefetches for navigations much better than <link rel="prefetch">; the former was designed specifically for that purpose whereas the latter has a number of limitations; see <link rel="prefetch"> for details.

DNS prefetching

DNS prefetching resolves domain names in advance, speeding up load times by reducing the time associated with domain lookup at request time.

<link rel="dns-prefetch" href="https://example.com/" />

See also

• Speculative loading
• Related glossary terms:
  • Prerender
• Speculation Rules API