UI Drafter Blog

Performance
Prefetch Pages

October 2, 2020
Eric Fortis

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.

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 tag to the head:

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

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

Option 2: Link response header

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