Performance
Prefetching Pages and DNS Records

by Eric Fortis

Prefetching Pages

Having instantly loading non-SPA pages is possible when they’re prefetched. For instance, the Uxtly’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"

Prefetching DNS Records

At my location, each prefetched DNS record saves about 240ms of load time. Therefore, Uxtly’s pages prefetch domain names users may go next, for example the documentation one, to prevent DNS lookups delays.

Option 1: <link> tag

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

Option 2: Link response header

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

Sponsored by: