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.
Lets get into them one by one.
dns-prefetchlink 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">
preconnectlink 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.
dns-prefetch + connection handshake.
It can be used like this.
<link rel="preconnect" href="//example.com">
prefetchlink 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.
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.
<link rel="prefetch" href="//example.com/images/image.png">
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
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 is something like
prefetch but it will not get ignored as
sometimes its always good to download assets whether user agent thinks its good or not.
NOTE: relationship to
preloaddeclare a resource and its fetch properties, but differ in how and when the resource is fetched by the user agent:
prefetchis an optional and low-priority fetch for a resource that might be used by a subsequent navigation;
preloadis 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.
<link rel="preload" href="//example.com/images/image.png">
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