Performance
Prefetch Pages

by Eric Fortis October 2, 2020

Having instantly loading non-SPA pages is possible when they’re prefetched. For instance, the UI Drafter’s docs are sequential pages, so we prefetch the next page in the flow.

The prefetched pages stay for at least 5 minutes in Chrome’s cache, as Addy Osmani explains in his article:

…prefetch requests are maintained in the unspecified net-stack cache for at least 5 minutes regardless of the cachability of the resource.

Option 1: <link> tag

Add link to the head:

<head>
  <link rel="prefetch" href="/the-next-page">

Also, that tag can be dynamically injected with JavaScript, for instance when hovering over an anchor, or conditionally, as Demian Renzulli does in his article.

Option 2: Link response header

Link: </the-next-page>; rel="prefetch"