Did you know there’s a simple way to speed up your website without a ton of effort? Today we will explore resource hints and directives, which are tiny html snippets we can use to boost the performance of your website or web application in just a few minutes or less.
By default browsers first load the resources that are declared in the HTML. However, the resource hints directives give you the power to tell the browser to load a few things in advance, which could improve the perceived load time of your site.
In the following guide, we will dive deeper into the differences between preload, prefetch, and preconnect.
What Is Preload directive?
A preload directive is an html tag that tells the browser how specific resources are fetched to your current navigation. Essentially it downloads resources in the background of your current page load, before it is actually used in the current page.
This directive can be defined within a <link> element in the head of the HTML documents. For example as
Preload also comes with an ability to define an as attribute with possible values including, but not limited to:
The as attribute allows you to have greater control of resource prioritization, amongst other things.
Syntax of Preload
Here are a syntax and very basic example of preloading.
1. Preloading an image.
<link rel="preload" href="image.png">
2. Preloading the fonts
According to the preload specification, when preloading fonts there is an additional attribute which must be taken into consideration.
Preload links for CORS enabled resources, such as fonts or images with a
crossoriginattribute, must also include a
crossoriginattribute, in order for the resource to be properly used.
<link rel=“preload” href=“https://example.com/fonts/font.woff” as=“font” crossorigin>
<!-- Via markup --> <link rel="preload" href="https://blog.keycdn.com/blog/css/mystyles.css" as="style">
Preload Browser Support
According to caniuse.com, preload supported by the following browsers:
Right now, Chrome, Firefox, Samsung internet. and chrome android browser supports Preload functionality and it will only get more widely accepted by future browsers, as everyone aims to speed up the internet.
What is Prefetching?
Prefetching a process where the browser fetches the resources required to display a specific page that the consumer is likely to get in its second click. In other words, the browser loads a page that you’re probably going to visit in the future. The browser can store these resource in its own local cache, to send the requested information quicker if the user does end up visiting that page.
Once a webpage has completed loading and the idle period has now passed, the browser starts downloading the next prefetched page. After a person clicks on a specific link which has already been prefetched, they’ll observe the content immediately.
Prefetch Browser Support
According to caniuse.com prefetch is supported by the following browsers:
Right now, IE, Edge, Chrome, Firefox, Samsung internet and chrome android browser supports Prefetch functionality. More to come in the future as other browsers support this functionality.
Type of Prefetch
There are two different types of prefetch.
- Link Prefetching
- DNS Prefetching
Lets we start understanding each prefetching in detail with few examples.
1. What is DNS Prefetching?
DNS prefetching permits the browser to perform DNS lookups to a webpage in the background during the user is surfing. This item reduces latency since the DNS lookup has already taken place.
Have a look at this page speed waterfall. Whenever you load a page the first thing happens is DNS lookup.
At any time you load a resource that the very first thing occurs is DNS lookup. If the resource is local to your domain, then the dns lookup has already happened so there’s not much help there. But if you use a CDN, or are loading scripts from another domain it will help to have the DNS already looked up.
According to Mozilla Developer Network:
“DNS requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. By speculatively prefetching DNS results, latency can be reduced significantly at certain times, such as when the user clicks the link. In some cases, latency can be reduced by a second. – It is also useful for resources behind a redirect.”
It’s interesting to know that Google Chrome does something like this already when you first start up. You can see which domain names it pre-resolves by visiting
Syntax of DNS Prefetch
You can force the DNS lookup every website by mansion the hostname by using the
rel attribute on the
<link> element with a link type of
<link rel="dns-prefetch" href="http://www.example.com/">
DNS prefetching can be added to a specific URL by adding the rel=”dns-prefetch” tag to the link attribute. We suggest using this for things such as Google fonts, Google Analytics, and your CDN.
<link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//cdn.domain.com"> <link rel="dns-prefetch" href="//opensource.keycdn.com"> <link rel="dns-prefetch" href="//www.google-analytics.com">
2. What is Link Prefetching?
The process for link prefetching is identical, however, Link prefetching is a bit different than DNS-prefetching. In link prefetching we never do the DNS lookup, we let the browser to fetch the resources, and save them at the cache, presuming that the user will click on or request it later on.
Syntax of Link Prefetch
The browser looks for prefetch in the HTML <link> or the HTTP header Link such as:
HTML: <link rel=”prefetch” href=”/uploads/images/pic.png“>
HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch
But be careful before you start doing this to all your pages. According to Google Developers:
“This technique has the potential to speed up many interactive sites, but won’t work everywhere. For some sites, it’s just too difficult to guess what the user might do next. For others, the data might get stale if it’s fetched too soon. It’s also important to be careful not to prefetch files too soon, or you can slow down the page the user is already looking at.”
What is Preconnect?
Preconnecting is another speed-optimization html tag, in which the browser sets up an early connection before an HTTP request is actually sent to the server.
Connections such as DNS Lookup, and TLS negotiation can be initiated beforehand, eliminating roundtrip latency for those connections and saving time for users.
According to Lya Grigorik:
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.
Syntax of Preconnect
It is added directly to the head of the HTML document with <link> tag as an attribute.
<link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin>
According to W3C Resource Hints, to initiate a preconnect, the user agent must carry out the following 6 steps:
- Resolve the URL given by the
- If that is successful, let preconnect URL be the resulting absolute URL, and otherwise abort these steps.
- If preconnect URL‘s scheme is not one of “http” or “https” then abort these steps.
- Let origin be preconnect URL‘s origin.
- Let corsAttributeState be the current state of the element’s
- Let credentials be a boolean value set to
- If corsAttributeStateis
Anonymousandorigin is not equal to current Document’s origin, set credentialsto
- Attempt to obtain connection with origin and credentials.
Preconnect Browser Support
According to caniuse.com preconnect is supported by the following browsers:
Right now, Edge, Chrome, Firefox, Samsung internet, safari and chrome android browsers supports preconnect functionality.
Predicting exactly what our site visitors will do next is tough, and it certainly needs a great deal of preparation and testing. However, the performance advantages are definitely worth pursuing. If we are prepared to experiment with all these prefetching methods, then we are guaranteed to enhance the user experience through faster page load times.
6 thoughts on “Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect”
Your “Preconnect Browser Support” is called as “Preload Browser Support”
Oops, thanks – updated!
Can I use both of them for backwards compatibility? As in if preconnect is not available, fallback to dns-prefetch.
In my case, I WILL load images from that subdomain on every page load.
Using more than one method is described here is absolutely okay.
What a great article! I have an issue though, I applied these techniques but they aren’t compatible with certain mobile browsers versions in Chrome, Mozilla nor Safari, how can I provide an option to the browser so the website doesn’t look broken?
Preloading is a feature that will benefit browsers that implement them, but shouldn’t break anything that doesn’t implement it yet.