Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect

Did you know there’s a simple way to speed up your website without a ton of effort? Today we will explore resource hints and directives, which are tiny html snippets we can use to boost the performance of your website or web application in just a few minutes or less.

By default browsers first load the resources that are declared in the HTML. However, the resource hints directives give you the power to tell the browser to load a few things in advance, which could improve the perceived load time of your site.

In the following guide, we will dive deeper into the differences between preload, prefetch, and preconnect.

What Is Preload directive?

A preload directive is an html tag that tells the browser how specific resources are fetched to your current navigation. Essentially it downloads resources in the background of your current page load, before it is actually used in the current page.

For example, perhaps you have some javascript, images, or fonts that are used lower in the page. By indicating they preload, your browser will start downloading them immediately and have them ready to use once they’re actually referenced in the HTML.

This directive can be defined within a <link> element in the head of the HTML documents. For example as

<link rel="preload">

Preload also comes with an ability to define an as attribute with possible values including, but not limited to:

• “script”
• “style”
• “font”
• “image”
• “document”

The as attribute allows you to have greater control of resource prioritization, amongst other things.

Syntax of Preload

Here are a syntax and very basic example of preloading.

1. Preloading an image.

<link rel="preload" href="image.png">

2. Preloading the fonts

According to the preload specification, when preloading fonts there is an additional attribute which must be taken into consideration.

Preload links for CORS enabled resources, such as fonts or images with a crossorigin attribute, must also include a crossorigin attribute, in order for the resource to be properly used.

<link rel=“preload” href=“https://example.com/fonts/font.woff” as=“font” crossorigin>

3. Preloading a stylesheet using markup and JavaScript.

<!-- Via markup -->
<link rel="preload" href="https://blog.keycdn.com/blog/css/mystyles.css" as="style">

<!-- Via JavaScript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "css/mystyles.css"; 
document.head.appendChild(res); 
</script>

Preload Browser Support

According to caniuse.com, preload supported by the following browsers:

Right now, Chrome, Firefox, Samsung internet. and chrome android browser supports Preload functionality and it will only get more widely accepted by future browsers, as everyone aims to speed up the internet.

What is Prefetching?

Prefetching a process where the browser fetches the resources required to display a specific page that the consumer is likely to get in its second click. In other words, the browser loads a page that you’re probably going to visit in the future. The browser can store these resource in its own local cache, to send the requested information quicker if the user does end up visiting that page.

Once a webpage has completed loading and the idle period has now passed, the browser starts downloading the next prefetched page. After a person clicks on a specific link which has already been prefetched, they’ll observe the content immediately.

Prefetch Browser Support

 According to caniuse.com prefetch is supported by the following browsers:

Right now, IE, Edge, Chrome, Firefox, Samsung internet and chrome android browser supports Prefetch functionality. More to come in the future as other browsers support this functionality.

 Type of Prefetch

There are two different types of prefetch.

• Link Prefetching
• DNS Prefetching

Lets we start understanding each prefetching in detail with few examples.

1. What is DNS Prefetching?

DNS prefetching permits the browser to perform DNS lookups to a webpage in the background during the user is surfing. This item reduces latency since the DNS lookup has already taken place.

Have a look at this page speed waterfall. Whenever you load a page the first thing happens is DNS lookup.

At any time you load a resource that the very first thing occurs is DNS lookup. If the resource is local to your domain, then the dns lookup has already happened so there’s not much help there. But if you use a CDN, or are loading scripts from another domain it will help to have the DNS already looked up.

According to Mozilla Developer Network:

“DNS requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. By speculatively prefetching DNS results, latency can be reduced significantly at certain times, such as when the user clicks the link. In some cases, latency can be reduced by a second. – It is also useful for resources behind a redirect.”

It’s interesting to know that Google Chrome does something like this already when you first start up. You can see which domain names it pre-resolves by visiting chrome://dns/

Syntax of DNS Prefetch

You can force the DNS lookup every website by mansion the hostname by using the rel attribute on the <link> element with a link type of dns-prefetch:

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

DNS prefetching can be added to a specific URL by adding the rel=”dns-prefetch” tag to the link attribute. We suggest using this for things such as Google fonts, Google Analytics, and your CDN.

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

<link rel="dns-prefetch" href="//cdn.domain.com">

<link rel="dns-prefetch" href="//opensource.keycdn.com">

<link rel="dns-prefetch" href="//www.google-analytics.com">

2. What is Link Prefetching?

The process for link prefetching is identical, however, Link prefetching is a bit different than DNS-prefetching. In link prefetching we never do the DNS lookup, we let the browser to fetch the resources, and save them at the cache, presuming that the user will click on or request it later on.

Syntax of Link Prefetch

The browser looks for prefetch in the HTML <link> or the HTTP header Link such as:

HTML: <link rel=”prefetch” href=”/uploads/images/pic.png“>

HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch

 But be careful before you start doing this to all your pages. According to Google Developers:

“This technique has the potential to speed up many interactive sites, but won’t work everywhere. For some sites, it’s just too difficult to guess what the user might do next. For others, the data might get stale if it’s fetched too soon. It’s also important to be careful not to prefetch files too soon, or you can slow down the page the user is already looking at.”

What is Preconnect?

Preconnecting is another speed-optimization html tag, in which the browser sets up an early connection before an HTTP request is actually sent to the server.

Connections such as DNS Lookup, and TLS negotiation can be initiated beforehand, eliminating roundtrip latency for those connections and saving time for users.

According to Lya Grigorik:

Preconnect is an important tool in your optimization toolbox… it can eliminate many costly roundtrips from your request path – in some cases reducing the request latency by hundreds and even thousands of milliseconds.

Syntax of Preconnect

It is added directly to the head of the HTML document with <link> tag as an attribute.

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

According to W3C Resource Hints, to initiate a preconnect, the user agent must carry out the following 6 steps:

1. Resolve the URL given by the href attribute.
   1. If that is successful, let preconnect URL be the resulting absolute URL, and otherwise abort these steps.
   2. If preconnect URL‘s scheme is not one of “http” or “https” then abort these steps.
2. Let origin be preconnect URL‘s origin.
3. Let corsAttributeState be the current state of the element’s crossorigin content attribute.
4. Let credentials be a boolean value set to true.
5. If corsAttributeStateis Anonymous andorigin is not equal to current Document’s origin, set credentialsto false.
6. Attempt to obtain connection with origin and credentials.

Preconnect Browser Support

According to caniuse.com preconnect is supported by the following browsers:

Right now, Edge, Chrome, Firefox, Samsung internet, safari and chrome android browsers supports preconnect functionality.

Summing Up

Predicting exactly what our site visitors will do next is tough, and it certainly needs a great deal of preparation and testing. However, the performance advantages are definitely worth pursuing. If we are prepared to experiment with all these prefetching methods, then we are guaranteed to enhance the user experience through faster page load times.