Every time your page requests a resource from a new domain — analytics scripts, fonts, CDN assets, tracking pixels — the browser first needs to resolve that domain's IP address via DNS. This lookup typically takes 20-120ms, and it happens sequentially. DNS prefetch (<link rel="dns-prefetch" href="//example.com">) tells the browser to do this resolution early, in the background, before the resource is actually needed.
It's a small optimization individually, but landing pages often load resources from 5-15 different domains: Google Fonts, analytics, your CDN, chat widgets, advertising pixels, social embeds. That's potentially a full second of DNS lookups if they all happen sequentially at the time of need.
DNS prefetch vs. preconnect
DNS prefetch only resolves the IP address. Preconnect goes further — it also performs the TCP handshake and TLS negotiation. Use preconnect for domains you know you'll need immediately (your CDN, your font provider). Use dns-prefetch as a lighter fallback for domains that might be needed later or for less critical resources. You can safely include both for the same domain as a progressive enhancement.
The practical move: view source on your landing page, list every third-party domain, and add dns-prefetch hints for each one in your <head>. Five minutes of work, and your waterfall chart gets noticeably tighter.