A couple of
days months ago Vitali Fridman showed some of the performance improvements they have made on smashingmagazine.com.
One enhancement was adding a prerender resource hint (also called a browser hint). The prerender resource hint or resource hints in general are not something new. They have been around for several years but I have never used or been given them much attention before now. They can actually be quite useful and help making your site load faster and the support is pretty good!
So what are resource hints and how can they boost performance of your pages?
A resource hint link is a dns-prefetch, preconnect, prefetch, or prerender relationship that is used to indicate an origin or resource that should be connected to, or fetched, by the user agent.
So a resource hint enable the developer and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.
Preconnect: Connection handshake in the background
<link rel="preconnect" href="http://cdn.dinbror.dk" crossorigin>
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.
– Lya Grigorik
Prefetch DNS hostnames for assets
<link rel="dns-prefetch" href="http://dinbror.dk">
DNS prefetching allows the browser to perform DNS lookups on a page in the background while the user is browsing.
Browsersupport: All browsers (IOS and Android browser unknown)
Prefetch a resource for future navigation
<link rel="prefetch" href="/images/dinbror.jpg">
Prefetch allows the browser to fetch a resource, store it in cache, assuming that the user will request it later.
Browsersupport: All browsers except Safari
Prerender a page for future navigation
<link rel="prerender" href="next-page.html">
Prerender is very similar to prefetch. Instead of prefetching a single ressource in the background, you now prerender an entire page including all it’s assets.
Browsersupport: All browsers except Firefox, Safari and Android browser
Preload: Declaratively fetch a resource without executing it
// Image <link rel="preload" href="/images/dinbror.png"> // Font, crossorigin is for CORS <link rel="preload" href="https://fonts.example.com/font.woff2" as="font" crossorigin type="font/woff2"> <link rel="preload" href="/assets/font.woff2" as="font" type="font/woff2"> // CSS <link rel="preload" href="/css/release.css" as="style">
Preload is not a browser hint but more a command. Unlike prefetch, which can be ignored by the browser, preload of a resource must be requested by the browser.
Browsersupport: Chrome, Opera and Android browser