Preconnect to Asset Domains
SHOULD: Add `<link rel="preconnect">` for every CDN and asset origin the page is certain to hit (with `crossorigin` for fonts and CORS-fetched assets) so DNS, TCP, and TLS overlap with HTML parsing. Only preconnect to origins you will definitely use — each holds an open socket.
Add <link rel="preconnect"> for every CDN and asset origin the page will hit
<link rel="preconnect" href="https://cdn.example.com" crossorigin>Bad
Good
Why it matters
The first request to a new origin cannot send a byte until DNS resolution, the TCP handshake and the TLS negotiation all complete — frequently more wall-clock time than the download itself, and it is paid serially at the worst possible moment. rel="preconnect" starts those handshakes as soon as the HTML is parsed, in parallel with everything else, so the eventual request finds a warm connection.
Preconnect only to origins you are certain to use (each one holds an open socket), and add crossorigin for font and CORS-fetched assets.