How website/app performance matters to you? What ways you know to improve it? Do you know just minification, concatenation, caching? Do we have other options?

What if you can get ready with your assets just before DOM is ready. What if you can load them in advance? Does it make a difference? Do you care? Big question to ask to our self.

We have some cool techniques to achieve advance or pre loading of our assets.

We can tell our browsers in advance to keep some assets that our end user might need in future. It will defiantly improve your user’s experience much smoother. Isn’t it?

Above concept/theory is knows as pre-browsing. pre-browsing is combination of various techniques which can be applied at different stages depending upon the requirement.

Techniques includes dns-prefetch, preconnect, prefetch, prerender, preload.

Lets get into them one by one.

#dns-prefetch

The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent should resolve as early as possible.

It tells our browser that this is the origin from where we are going to get our resources. So resolve this DNS as soon as possible. For example: We have our logo image on http://example.com/images. so we have example.com that will be resolved to its source IP when it will be requested by the browser. And it defiantly take some time to resolve the dns. So by using dns-prefetch we can resolve this domain just before we need them, not at the time when we are requesting our actual asset like logo image.

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

#preconnect

The preconnect link relation type is used to indicate an origin that will be used to fetch required resources. 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.

The user agent should try to establish a full connection handshake with given URL. DNS+TCP for HTTP and DNS+TCP+TLS for HTTPS.

In short preconnect is dns-prefetch + connection handshake.

It can be used like this.

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

 

#prefetch

The prefetch link relation type is used to identify a resource that might be required by the next navigation, and that the user agent should fetch, such that the user agent can deliver a faster response once the resource is requested in the future.

If we are sure that some resource is going to be needed by our user then we can make use of it to cache it in advance.

unlike dns-prefetch we are actually requesting the resource and downloading it to store in browser’s cache. So make sure to use it only if you are sure that resource is going to be used otherwise you are consuming user’s bandwidth for no reason.

Please note: There is no surety that resource will be get fetched as there might be reasons to get it ignored by your browsers. One use  case can be larger file on a slow connection.

Use:

	<link rel="prefetch" href="//example.com/images/image.png">

#prerender

The prerenderhint can be used by the application to indicate the next likely HTML navigation target: the user agent will fetch and process the specified resource as an HTML response. To fetch other content-types with appropriate request headers, or if HTML preprocessing is not desired, the application can use the prefetch hint.

prerender gives a unique ability to render all the resources of a document i.e HTML page.

Its like loading a page in a headless browser. Use case for prerender can be some html pages that you are sure that user is going to navigate to. Use of this option requires a lot study of user behavior on your website to make sure you are not eating up CPU/GPU for nothing.

Uses can be like this:

	<link rel="prerender" href="https://sgoyal.net">

 

#preload

preload is something like prefetch but it will not get ignored as prefetch.

sometimes its always good to download assets whether user agent thinks its good or not.

NOTE: relationship to prefetch
Both prefetch and preload declare a resource and its fetch properties, but differ in how and when the resource is fetched by the user agent: prefetch is an optional and low-priority fetch for a resource that might be used by a subsequent navigation; preload is a mandatory and high-priority fetch for a resource that is necessary for the current navigation. Developers should use each one accordingly to minimize resource contention and optimize load performance.

Use:

 	<link rel="preload" href="//example.com/images/image.png">

#At Last

Discussed link concepts are features of HTML5 and partially supported by browsers. So it is recommended to check browser compatibility before make a decision. But no doubt about the usability of the concept and these options can help us in many ways to deliver our users best experience.

Take a look at the w3c website for more deep understanding about the tags and all attribute they support for advance usage.  l.sgoyal.net/1ZVDOVc

Browser compatibility can be validated on  l.sgoyal.net/23fHhjg

Thanks!

Happy Learning.