<b>preconnect saves 200ms; dns-prefetch saves 30ms</b>

<b>preconnect saves 200ms; dns-prefetch saves 30ms</b>
Third-party origins cost a full handshake before the first byte. The hint you pick changes the savings.
— <code>dns-prefetch</code>: resolves DNS only (~20-40ms)
— <code>preconnect</code>: DNS + TCP + TLS (~150-250ms on mobile)
— Budget rule: preconnect costs a connection slot — use it for the 2-3 origins on the critical path only
— Preconnecting 8 origins backfired: contention pushed the LCP image connection back 110ms
Measured: 2 preconnects to font + image CDN saved 200ms; the 6 extra hurt.
Takeaway: preconnect max 2-3 critical origins, dns-prefetch the rest.