Preconnect

Preconnect is a resource hint implemented via <link rel="preconnect"> that instructs the browser to proactively establish a connection — including DNS resolution, TCP handshake, and TLS negotiation — to a third-party origin before any resource from that origin has been requested. This eliminates the connection setup latency when the browser later needs to fetch assets such as fonts from Google Fonts, scripts from a CDN, or API responses. The savings are most significant on HTTPS origins where TLS negotiation can add hundreds of milliseconds on slow connections. A related hint, dns-prefetch, performs only the DNS lookup step and is a useful fallback for browsers that do not support preconnect. Preconnect should be limited to the two or three origins most critical to rendering, since each idle connection wastes CPU and memory. Lighthouse and PageSpeed Insights flag third-party origins that would benefit from preconnect when they are discovered late in the page load, particularly those serving the LCP image or render-blocking resources.