Preconnect (<link rel="preconnect" href="https://example.com">) tells the browser to proactively establish a full connection to a domain: DNS resolution + TCP handshake + TLS negotiation. On an HTTPS connection, this three-step process adds 100-300ms of latency. Preconnect moves that overhead to idle time before the resource is needed, so when the browser actually requests the resource, the connection is already warm.
The impact is most visible for resources that block rendering. If your landing page loads Google Fonts from fonts.googleapis.com, adding a preconnect for that domain means the font file starts downloading immediately instead of waiting for the CSS to be parsed, the font URL to be discovered, and then the connection to be established. That can shave 200-400ms off your FCP.
When to preconnect vs. dns-prefetch
Preconnect is heavier than dns-prefetch — it opens a full connection that times out after 10 seconds if unused. Use it only for domains you'll definitely need within the first few seconds: your CDN, your font provider, your critical API endpoint. For domains that might be needed later (analytics, optional third-party widgets), use dns-prefetch instead.
A common Lighthouse recommendation is "Preconnect to required origins." Don't blindly preconnect to everything. Each preconnect consumes CPU and network resources. Limit yourself to 2-4 critical domains. More than that and the overhead of establishing connections can actually slow down the initial load by competing with critical resource downloads.