DNS Lookup is the process of translating the domain name to the corresponding IP address. In terms of the web, the DNS Lookup is part of the request lifecycle. So it affects the page load time. This blog post describes the browser optimization techniques called prefetching, prerendering and preloading. The idea of prefetching is to utilize the browser idle time to download resources or documents that the user might visit in near future.
Pre-resolve DNS hostnames for resources used later in the page.
<link rel="dns-prefetch" href="//fonts.gstatic.com">
Controling DNS prefetching from the browser.
<!-- Turn off DNS prefetching --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- Turn on DNS prefetching --> <meta http-equiv="x-dns-prefetch-control" content="on">
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.
<link rel="preconnect" href="//example.org"> <link rel="preconnect" href="//cdn.example.org" crossorigin>
Initiates early fetch of resources for current navigation.
<link rel="subresource" href="styles.css">
Available attributes are:
Prefetch resources (images, fonts, styles, scripts) for future navigation (stored in browser cache).
<link rel="prefetch" href="/fonts/arial.ttf" as="font" crossorigin>
The browser will load the page in the cache. To tell the browser to prefetch a link/page use:
<link rel="prefetch" href="/next-page.html" as="html">
Using a page prerendering will load a page and its resources in a browser cache for a future navigation.
<link rel="prerender" href="https://domain.com/next-page.html">
prefetch is an optional and low-priority fetch for a resource that might be used by a subsequent navigation. There are 3 different ways to specify resource hints links to the browsers:
<link href="https://example.org/sprite.png" rel="prefetch" as="image">
Link: <https://example.org/sprite.png>; rel=prefetch; as=image;
var link = document.createElement('link'); link.href = 'https://example.org/sprite.png'; link.rel = 'prefetch'; link.as = 'image'; document.head.appendChild(link);
preload is a mandatory and high-priority fetch for a resource that is necessary for the current navigation.
Link: </assets/script.js>; rel=preload; as=script
Link: </css/main.css>; rel=preload; as=style; nopush Link: </js/main.js>; rel=preload; as=script
Prefetched links and resources, stored in the browser cache, load faster when a user navigates to. That has a great impact of user experience. Using link prefetching makes sense when a user is expected to visit the resource in near future, otherwise is a waste of bandwidth.
If you have questions about browser optimization, leave a comment below. And do not be shy to share this article. Thanks so much for reading!
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.