49

https://www.w3.org/TR/resource-hints/

If I understand correctly, both are used to initiate an early connection to load resources faster at a later time.

preconnect is just doing "more".

Apart from a better browser support, is there any reason to use dns-prefetch over preconnect? I've also seen websites using both rel at the same link tag in order to use preconnect if possible and fall back to dns-prefetch if not.

<head>
  <link
    rel="dns-prefetch preconnect"
    href="https://fonts.gstatic.com"
    crossorigin
  >
</head>
Robin Drexler
  • 4,307
  • 3
  • 25
  • 28
  • 1
    preconnect is an expensive tag, so you need to run tests to figure out the impact of adding these. It is recommended to use preconnect to connect to domains that you know for sure you will use to fetch resources. Moreover, the recommended number of preconnect tags is limited. You can use your dns-prefetch as a fallback for your preconnect tags. I spent some time reading about dns-prefetch and preconnect resource hints and wrote an article on Medium with references to different articles summarising the not so obvious parts I found: https://medium.com/p/82d633c7f210 – jobmo Jul 18 '22 at 08:12

6 Answers6

68

I've been researching the topic a bit lately and so far my (theoretical) conclusions are as follows:

Browser support is high for both as of November 2022, when counting the real global usage of browsers (~94% vs ~83%)

dns-prefetch = DNS and preconnect = DNS + TCP + TLS. Note that DNS lookup is quite cheap to perform (a simple query-response to the DNS server, that is cached in the browser for a short amount of time), whereas TCP and TLS involves some server resources.

The practical difference is hence, if you know that a server fetch will happen for sure, preconnect is good. If it will happen only sometimes, and you expect huge traffic, preconnect might trigger a lot of useless TCP and TLS work, and dns-prefetch might be a better fit.

For example:

  • if the page requests https://backend.example.com/giveMeFreshData on each load, and the response is not cacheable, preconnect is a good fit
  • if the page only requests a static resource like https://statics-server.example.com/some-image.jpg or https://statics-server.example.com/some-css.css, and the resource is very likely to come from the user's browser cache (the very same resource(s) is used on many pages, and your user will trigger a lot of page loads like this with the warm cache -- and no other resources are fetched from that origin), then preconnect might be creating a lot of unnecessary TCP connections on your server (that will abandoned after a few seconds, but still, they were not necessary in the first place) and TLS handshakes (however in such case, preload might be an option if you know the exact URL and the resource is very important).
  • If the traffic on your website is small though, it should not be impacted too much by this difference, so preconnect is probably a good fit for low-traffic websites, regardless of the things mentioned before.

As always, it's best to think about the use cases, deploy, measure, and fine tune.

jakub.g
  • 38,512
  • 12
  • 92
  • 130
  • 1
    One note: even if Firefox officially supports preconnect, it does not seem to work: https://bugzilla.mozilla.org/show_bug.cgi?id=1543990 – jakub.g Feb 14 '20 at 10:01
  • [Does preconnect increase page load if the ressource is already in the cache?](https://stackoverflow.com/questions/64605529/dns-prefetch-preconnect-vs-browser-cache) – Sr. Schneider Oct 30 '20 at 16:44
  • Firefox also seems to currently have a bug where `dns-prefetch` doesn't work if the origin is HTTPS. – Michael Mior Nov 03 '22 at 18:01
17

1 Preconnect

The final resource hint we want to talk about is preconnect. Preconnect allows the browser to setup early connections before an HTTP request is actually sent to the server. This includes DNS lookups, TLS negotiations, TCP handshakes. This in turn eliminates roundtrip latency and saves time for users.

2 Prefetch

Prefetch is a low priority resource hint that allows the browser to fetch resources in the background (idle time) that might be needed later, and store them in the browser’s cache. Once a page has finished loading it begins downloading additional resources and if a user then clicks on a prefetched link, it will load the content instantly.

2.1 Link Prefetching

Link prefetching allows the browser to fetch resources, store them in cache, assuming that the user will request them. The browser looks for prefetch in the HTML or the HTTP header Link.

2.2 DNS Prefetching

DNS prefetching allows the browser to perform DNS lookups on a page in the background while the user is browsing. This minimizes latency as the DNS lookup has already taken place once the user clicks on a link. DNS prefetching can be added to a specific url by adding the rel="dns-prefetch" tag to the link attribute. We suggest using this on things such as Google fonts, Google Analytics, and your CDN.

2.3 Prerendering

Prerendering is very similar to prefetching in that it gathers resources that the user may navigate to next. The difference is that prerendering actually renders the entire page in the background, all the assets of a document.

More details: https://www.keycdn.com/blog/resource-hints/

Conclusion

Main Difference between dns-prefetch & preconnect

The difference between dns-prefetch and preconnect is dns-prefetch will only do the DNS lookup, while preconnect will do the DNS lookup, TLS negotiation, and the TCP handshake. This means that it avoids an additional 2 RTT once the resource is ready to be downloaded.

An important aspect is that support for dns-prefetch is much larger than support for preconnect.

You can find some concrete examples here: https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/

Pascut
  • 3,291
  • 6
  • 36
  • 64
  • 1
    Thanks for the answer, however, I don't think that really answers the question of when you'd use dns-prefetch over preconnect, even if both are supported. – Robin Drexler Nov 24 '17 at 10:50
  • 1
    I have the same question. I want to eliminate orange and purple bars in the Chrome DevTool's Network tab and it seems that the preconnect is a right tool to do that. As far as I understand, dns-prefetch does only part of this work, so I consider it only as a fallback option for preconnect (now I am trying to figure out whether it is a good idea to insert both at the same time). – Andrew Simontsev Jan 11 '18 at 05:24
  • A good idea will be to try to insert both at the same time. You can share the results with us (please do that). – Pascut Jan 11 '18 at 13:41
  • As of November 2022, it seems like support for `preconnect` is actually higher than `dns-prefetch`. – Michael Mior Nov 03 '22 at 18:01
6

You can speed up the load time by 100–500 ms by establishing early connections to important third-party origins. These numbers might seem small, but they make a difference

enter image description here

Browser support for dns-prefetch is slightly different from preconnect support, so dns-prefetch can serve as a fallback for browsers that don't support preconnect.

enter image description here

Vivek Kumar
  • 2,625
  • 2
  • 25
  • 33
4

<link rel="dns-prefetch preconnect"> doesn’t work in WebKit (Safari).

You can use <link rel="dns-prefetch"> and <link rel="preconnect"> in two separate elements, if you want to use preconnect (when available, browsers since end of 2015) with dns-prefetch (in browsers since 2008) as a fallback.

Daniel
  • 4,525
  • 3
  • 38
  • 52
2

As of 2021, preconnect is supported by all major browsers. dns-prefetch has been deprecated since 2016 and some sources suggest against using both at the same time because the browser will connect to the domain twice, which is costy to site visitors with tight internet bandwidth plans. dns-prefetch was preferred in the past because IE does not support preconnect, but now that IE is being discontinued by MS, there's no need to use dns-prefetch at all.

KHAYRI R.R. WOULFE
  • 189
  • 2
  • 5
0

dns-prefetch : Resolve domain name before resources get requested.

preconnect : Resolve domain name + TCP connection + TLS handshake.

If your website makes connection to lot of third party domains, then the DNS lookup can add significant amount of latency. In this case, using dns-prefetch can help reduce the latency significantly.

In the above case, preconnect can also be used to reduce DNS lookup latency but it will also establish a TCP connection and perform TLS handshake with all the third party domains. This can add CPU and Network cost overhead at both client and server side if not used wisely.

Preconnect often, Preconnect wisely
Each open socket incurs costs both on the client and server, and you want to avoid opening sockets that might go unused.

Article by Ilya Grigorik : Link

Without Preconnect

enter image description here

With Preconnect

enter image description here

PR7
  • 1,524
  • 1
  • 13
  • 24