Prefetching Resources

Posted on: March 2, 2016 by Dimitar Ivanov

Introduction

DNS Lookup is the process of translating the domain name to the corresponding IP address. In terms of the web, the DNS Lookup is part of the request lifecycle. So it affects the page load time. This blog post describes the browser optimization techniques called prefetching, prerendering and preloading. The idea of prefetching is to utilize the browser idle time to download resources or documents that the user might visit in near future.

DNS Prefetch

Pre-resolve DNS hostnames for resources used later in the page.

<link rel="dns-prefetch" href="//fonts.gstatic.com">

Controling DNS prefetching from the browser.

<!-- Turn off DNS prefetching -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Turn on DNS prefetching -->
<meta http-equiv="x-dns-prefetch-control" content="on">

Preconnect

Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection.

<link rel="preconnect" href="//example.org">
<link rel="preconnect" href="//cdn.example.org" crossorigin>

Subresources

Initiates early fetch of resources for current navigation.

<link rel="subresource" href="styles.css">

Prefetch

Available attributes are:

as - it's optional. Accepted values: image, style, html, font, script, iframe
crossorigin - it's optional. Accepts: anonymous, use-credentials. The empty string is also valid keyword, and maps to anonymous.

Prefetch resources (images, fonts, styles, scripts) for future navigation (stored in browser cache).

<link rel="prefetch" href="/fonts/arial.ttf" as="font" crossorigin>

The browser will load the page in the cache. To tell the browser to prefetch a link/page use:

<link rel="prefetch" href="/next-page.html" as="html">

Prerender

Using a page prerendering will load a page and its resources in a browser cache for a future navigation.

<link rel="prerender" href="https://domain.com/next-page.html">

Fetching the resource hint link

prefetch is an optional and low-priority fetch for a resource that might be used by a subsequent navigation. There are 3 different ways to specify resource hints links to the browsers:

Document markup

<link href="https://example.org/sprite.png" rel="prefetch" as="image">

HTTP Link header

Link: <https://example.org/sprite.png>; rel=prefetch; as=image;

Dynamic with JavaScript

var link = document.createElement('link');
link.href = 'https://example.org/sprite.png';
link.rel = 'prefetch';
link.as = 'image';
document.head.appendChild(link);

Preload

preload is a mandatory and high-priority fetch for a resource that is necessary for the current navigation.

Link: </assets/script.js>; rel=preload; as=script

Server Push (HTTP/2) - Initiating server push eliminates the request roundtrip between client and server for the declared preload link resource. To take advantage of this your server must be HTTP/2 push capable. To omit a server push use the nopush attribute.
```
Link: </css/main.css>; rel=preload; as=style; nopush
Link: </js/main.js>; rel=preload; as=script
```

Conclusion

Prefetched links and resources, stored in the browser cache, load faster when a user navigates to. That has a great impact of user experience. Using link prefetching makes sense when a user is expected to visit the resource in near future, otherwise is a waste of bandwidth.