Pre-fetching is a way of hinting to the browser about resources that are definitely going to or might be used in the future, some hints apply to the current page, others to possible future pages.

As developers we know our applications better than the browser does, we can use this information to inform the browser about core resources.

2.3.1 DNS Pre-fetching


At the simplest level we can tell the browser to resolve the DNS for another hostname that we know will access later on the page:

<link rel="dns-prefetch" href="my.otherhostname.co.uk">

Using the connections view in this WebPageTest result try and find the effect on pre-fetching DNS.

http://www.webpagetest.org/result/140212_ND_D22/1/details/

2.3.2 Sub-resource


Some browsers such as Chrome and Opera also allow us to hint that we are going to use another resource later in the current page and so it should be downloaded as a high priority.

This is very useful for instance in JavaScript applications to download data resources e.t.c.

<link rel="subresource"  href="http://www.me.com/my-data.json" />

Add this to the example page provided and view the effect it has on the network waterfall.

2.3.2 Pre-render


What if we could tell the browser to pre-render entire pages in the background, allowing for instant switching when a users follows the link to the page.

The pre-render hint allows us to do this.

<link rel="prerender"  href="/thenextpage.html" />

This can be extremely useful if you know the user is going on to the next page. For instance in an image gallery, or checkout flow.

Warning:

With great power, comes great responsibility. This attribute should not be abused, as you are essentially forcing the browser to download hundreds of resources. Only use if you are very certain the user will go to this resource next.