Learn Performance - Prefetch and Prerender

Speculation Rules

On Chromium-based browsers, it is also possible to prefetch resources or documents using speculation rules. This page contains speculation rules to prefetch the document 3-prefetch.

Go to prefetched page

Similarly to the previous demo, if you observe the network tab, you should notice that the document is prefetched.

Chrome DevTools Network panel showing 4 resources. The prefetched document (row 4) is fetched with the Lowest priority.

In the network panel above, the prefetched document 3-prefetch is downloaded with the Lowest priority.

View Source Code
<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["/3-prefetch"]
      }
    ]
  }
</script>