UI Drafter Blog

Performance
Prefetching Pages
and DNS Records

October 2, 2020
by Eric Fortis

Prefetching Pages

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 conditionally injected with JavaScript, as Demian Renzulli does in his article.

Option 2: Link response header

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

Prefetching DNS Records

At my location, each prefetched DNS record saves ~240ms of load time. Therefore, UI Drafter prefetches domain names users may go next. For example:

Option 1: <link> tag

<head>
  <link rel="dns-prefetch" href="//docs.uidrafter.com">

Option 2: Link response header

Link: <//docs.uidrafter.com>; rel="dns-prefetch"