<link rel="dns-prefetch"> is the cheapest of the resource hints: the browser performs only the DNS lookup for the named origin and caches the result. When the actual request fires, the lookup is already done -- typically saving 20-200ms depending on network and DNS conditions. No connection is opened; no TLS handshake happens.
dns-prefetch is the right choice when:
- You can't be sure when (or whether) the actual request will fire, but DNS is cheap to resolve preemptively.
- The origin will only be hit once or twice in the page lifecycle (the connection-establishment savings of preconnect won't be reused enough to justify the cost).
- You need broad browser support; dns-prefetch is one of the oldest and most universally supported hints.
Don't use dns-prefetch together with preconnect for the same origin. Preconnect already includes the DNS lookup -- the dns-prefetch is at best a no-op, and on some browsers schedules a redundant lookup. Pick one based on cost vs benefit: dns-prefetch when the origin is uncertain, preconnect when it's a sure thing.