Browser Resource Hinting with Prefetch, Preconnect, and Prerender

Samuel Oloruntoba

It used to be that if we wanted to optimize our frontend assets, we would concatenate, minify, gzip etc. Don't get me wrong, we still do these things. Just that nowadays there are more steps we could take to increase performance on the frontend.

Resource hinting just like the name implies send hints to the browser "What Resource to get next?"

One of "these steps" we could take is called Resource Hinting. Resource hinting just like the name implies send hints to the browser "What Resource to get next?". Basically, we tell the web browser to load a particular resource before a user needs it. This can help us avoid DNS lookups, TCP connections, HTTPS handshakes etc.

Currently, there are four official ways to do this: preconnect, prefetch, dns-prefetch, prerender. Not in any particular order, we will start with DNS prefetching.

DNS Prefetching

If you have a website, odds are you have Google analytics or some other form of third-party analytics installed on your site.

Not just analytics, anything that involves installing third-party script is overhead due to extra HTTP call(s). This also includes facebook widgets, twitter follow button widget, AD snippets, etc.

NOTE: Third Party in this context involves anything that comes from another domain, even if it is your subdomain. The resource is not a link pointing to a blog post, but rather a link pointing to an image, a css file, JavaScript file, html file etc.

With DNS prefetching, we can tell the browser to perform a DNS lookup on the domains of these third party scripts, and when we finally make a request, we get only the file since we've already carried out DNS lookup before hand.

Doesn't sound like much right? Wrong, a DNS lookup can take as much as 1 - 3 seconds or higher in weird situations. Now, imagine you have at least 3 of this type of resource on your page. It means your website will be slow, and users hate slow websites.

To let the browser prefetch a domain DNS, you can add this little snippet to your website's <head> tag.

<link rel="dns-prefetch" href="http://example.com">

The href should only point to the domain of the resource and not to the resource itself. Now, when the browser comes across this <link tag on the page, it immediately starts performing a DNS lookup in the background, and when the resource gets called only a download is required, no more DNS lookup.

For browser support, DNS Prefetching has a large reach on desktop browsers, but still lacking when it comes to mobile browsers and of course older IE versions.

Browser support for DNS prefetching

SpeedTest for DNS Prefetching

For this test we create two HTML pages that load a twitter follow button widget. One page will use dns-prefetch and the other wont use it. Also, using chrome's inbuilt speed throttling, reduce the speed to 1Mbps and load both pages.

Here is the result without dns-prefetch on this page.

With dns-prefetch on this page. .

Preconnect

Taking DNS prefetching a bit further, preconnect is basically dns-prefetch on steroids. If the domain you enabled prefetching for uses HTTPS, preconnect allows you to not only perform DNS lookups but also resolve TCP roundtrips, TLS negotiations etc.

If you thought DNS lookups were slow, TLS negotiations are slower as they involve a to and fro movement of SSL certificates for verification.

Enabling preconnect is simple, you just have to add a link tag with rel of preconnect and href pointing to the domain where the resource is hosted.

<link rel="preconnect" href="https://cdn.example.com">

Preconnect is still lacking currently when it comes to browser support as only a few browsers support it. So, for now at least, only use DNS prefetching.

browser support for preconnect

Prefetching

This allows you to go get an entire resource. For example, a font, an image. With prefetching, we can download and kept image in the browsers cache, and when the request for the file is made, the browser just looks in its cache and serves the file.

<link rel="prefetch" href="/path/to/resouce/image.png">

Currently, its implementations are not consistent. Take Firefox for example, it will only prefetch resources only when the browser is idle

But for browser support, only a few mobile browsers and the new internet explorer (not edge, Safari) don't support prefetching.

browser support for prefetching

Prerendering

Prerendering lets us download an entire webpage and all its resources and cache it. With prerendering, the DOM is created, the page is laid out, css applied, JavaScript executed, etc. With the use of Page visibility api we can prevent the executed JavaScript from affecting the user's experience.

This is edge case, and should be used mostly when your user has a slow connection or when you are absolutely sure that your user will click on that link.

Prerendering makes loading a link instant, similar to searching with Google instant.

To preload a page, just add this <link> tag to the page.

<link rel="prerender" href="http://example.com">

Note: this will download the entire page.

browser support fo prerendering

This has the worst browser support and should be used sparingly (at least for now).

Hint Probability

Since we are not sure what a user does on the page, we could guess. For example, if a user scrolls past a certain part of the page, we could increase the probability of prerendering the next navigation page.

To set a probability, we need to add a new pr attribute to the link tag with the value. The value for probability is a float ranging from 0 - 1.0.

<link rel="prerender" href="//example.com/page/2" pr="0.42">

Note

This is just for a twitter button and bootstrap css on a CDN. A normal page could have more than that.

Conclusion

This is total speculation, and I don't have any tests or proof to back this up, but it seems only logical, loading too many widgets on your page will definitely slow down your website as will hinting at too many resources. Everything should be done in moderation.

In closing, predicting what a user does next is almost impossible, but it doesn't hurt to try, right?

To learn more about Resource hinting check out the W3 document.

Samuel Oloruntoba

I'm a freelance web developer that focuses on building performant web applications. Hire me on Upwork or email