Skip to main content

Prebrowsing: Boost performance of your site with resource hints

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.
– w3c

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

Browsersupport: Firefox, Chrome, Opera and latest Android browser (built-in + Chrome)

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

One thought on “Prebrowsing: Boost performance of your site with resource hints

Leave a Reply

Your email address will not be published. Required fields are marked *