Categories
Prefetching Resources
Introduction
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.
DNS Prefetch
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">
Preconnect
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>
Subresources
Initiates early fetch of resources for current navigation.
<link rel="subresource" href="styles.css">
Prefetch
Available attributes are:
- as - it's optional. Accepted values: image, style, html, font, script, iframe
- crossorigin - it's optional. Accepts: anonymous, use-credentials. The empty string is also valid keyword, and maps to anonymous.
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">
Prerender
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">
Fetching the resource hint link
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:
- Document markup
<link href="https://example.org/sprite.png" rel="prefetch" as="image">
- HTTP
Link
headerLink: <https://example.org/sprite.png>; rel=prefetch; as=image;
- Dynamic with JavaScript
var link = document.createElement('link'); link.href = 'https://example.org/sprite.png'; link.rel = 'prefetch'; link.as = 'image'; document.head.appendChild(link);
Preload
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
- Server Push (HTTP/2) - Initiating server push eliminates the request roundtrip between client and server for the declared preload link resource. To take advantage of this your server must be HTTP/2 push capable. To omit a server push use the
nopush
attribute.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.
- Resource Hints (W3C)
- Preload (W3C)
- Speed Up Your Site Using Prefetching
- Optimizing DNS with prefetching (Ilya Grigorik)
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!
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed