Menu
I've been reading up on using dns-prefetch and preconnect. Obviously they should be used, because every little bit helps.
dns-prefetch has a lot better support across browsers than preconnect. So my question is, if a browser doesn't support preconnect, does it fall back to a dns-prefetch? My thinking is preconnect is basically dns-prefetch with some extra sauce (tls negotiations, what not). But I could also see how that isn't the case.
Next, if I am wanting something to preconnect, but want to make sure the dns-prefetch at least works, should I include both? Is that optimal?
513
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.
Preconnecting is only effective for domains other than the origin domain, so you shouldn't use it for your site. Only preconnect to critical domains you will use soon because the browser closes any connection that isn't used within 10 seconds.
Preload is an early fetch instruction to the browser to request a resource needed for a page (key scripts, Web Fonts, hero images). Prefetch serves a slightly different use case — a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations.
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.
Second, it's also possible to specify dns-prefetch (and other resources hints) as an HTTP header by using the HTTP Link field: Third, consider pairing dns-prefetch with the preconnect hint. While dns-prefetch only performs a DNS lookup, preconnect establishes a connection to a server.
The preconnect hint is best used for only the most critical connections. For the others, just use <link rel="dns-prefetch"> to save time on the first step — the DNS lookup. The logic behind pairing these hints is because support for dns-prefetch is better than support for preconnect.
The browser looks for prefetch in the HTML or the HTTP header Link. 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.
I was looking answer for the same question and i found this thread on reddit: https://www.reddit.com/r/webdev/comments/80w8c0/some_questions_regarding_preconnect_and/ and there was a link to a Twitter post: https://twitter.com/csswizardry/status/962313751818113024 which states:
Question:
Performance experts, shall we use dns-prefetch or preconnect for things like CDN?
preconnect seems to have a bigger impact but has a lesser support. Can we use both safely?
I can’t seem to find a definitive answer as to which to use when.
Answer:
Use both. Put your preconnects first.
121
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
