preload vs preconnect: 180ms vs 40ms

preload vs preconnect: 180ms vs 40ms
Both are resource hints. They are not interchangeable.
—
preconnect: opens the socket (DNS + TCP + TLS handshake) early. Saves ~40-120ms per third-party origin.
—
preload: fetches a specific byte stream now at high priority. Saves ~150-300ms on a render-blocking LCP image or font.
—
Wrong move: preloading 6 assets. The browser de-prioritizes everything and your real LCP slips +200ms.
Rule: preconnect the origin, preload only the 1-2 bytes that gate first paint.
Takeaway: preload max 2 assets, or you net negative.