Menu
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> 
491
If a page needs to make connections to many third-party domains, preconnecting all of them is counterproductive. The preconnect hint is best used for only the most critical connections. For all the rest, use <link rel=dns-prefetch> to save time on the first step, the DNS lookup, which usually takes around 20–120 ms.
dns-prefetch : indicates to the browser that it should perform the resolution of a given domain name (determining the IP to contact) before that domain is used to download resources. preconnect : indicates to the browser that it should connect a given origin, before that domain is used to download resources.
A DNS prefetch is a resource hint to make a DNS lookup for a domain the browser has not yet determined needs to be made. This can improve performance because when the browser does need to make a request for a resource, the DNS lookup for that domain has already occurred.
The preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.
I've been researching the topic a bit lately and so far my (theoretical) conclusions are as follows:
Browser support difference is negligible as of mid-2018, when counting the real global usage of browsers (~73% vs ~74%)
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:
https://backend.example.com/giveMeFreshData on each load, and the response is not cacheable, preconnect is a good fithttps://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).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.
87
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/
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
