Performance
Preconnect
Preconnect is a hint that tells the browser to open the DNS, TCP, and TLS connection to another origin before any request needs it. When the real request arrives, the connection is already warm.
How it is measured
Add `<link rel=preconnect href=https://fonts.gstatic.com crossorigin>` to the head. In a waterfall, the DNS, connect, and SSL segments of the first request to that host shrink to nearly nothing and the request starts earlier.
The saving is one to three round trips: DNS lookup, TCP, and TLS. On a 150 ms mobile round trip, that is roughly 300 to 450 ms. Lighthouse's 'Preconnect to required origins' audit estimates the gain, and warns about hints that were never used.
Worked example
A Next.js blog loads its body font from fonts.gstatic.com and images from an image CDN. In WebPageTest on 4G with 170 ms RTT, the font request starts at 1.9 s because the CSS has to arrive first, then spends 520 ms on DNS, TCP, and TLS. Preconnecting to both hosts moves the font response forward by about 480 ms and LCP from 3.1 s to 2.7 s.
Later someone adds preconnect for six analytics and chat hosts. Idle connections are closed after a short time if nothing uses them, and the extra setup competes for bandwidth with the CSS and image the page does need. LCP creeps back to 2.9 s.
How it differs
Preconnect opens a full connection. DNS-prefetch only resolves the name, a lighter hint that suits hosts you are unsure about. Preload fetches a specific file. Preconnect fetches nothing; it only readies the pipe.
Common errors
Preconnecting to hosts the page never uses. Forgetting `crossorigin` on font hosts, so the warmed connection is not reused. Adding ten of them. Preconnecting to your own origin, which is already connected. Placing the hint late in the body.
In practice
Open a waterfall and look for third-party hosts with long DNS, connect, and SSL segments in front of an LCP-critical file. Preconnect those two or three, with `crossorigin` for fonts. Re-run and confirm the setup segments are gone, and delete any hint that shows no effect.