<link rel="preconnect"> tells the browser to eagerly establish a full connection (DNS lookup + TCP handshake + TLS handshake) to a third-party origin the page will hit shortly. When the actual request fires, the connection is already warm and the request skips ~100-300ms of setup overhead -- a meaningful LCP win on connections that would otherwise have to negotiate TLS for the first time.
Best targets: third-party CDNs serving render-blocking CSS, font hosts (Google Fonts, Adobe Fonts), the analytics endpoint that fires a beacon early, the LCP image's CDN. Use the crossorigin attribute when the actual request will be a CORS request -- without it, the connection is opened in a different connection pool than the request needs and the warmup is wasted.
Each preconnect costs a TCP+TLS connection, which holds resources on both client and server. More than ~6 preconnects on a single page typically degrades performance: the parallel handshakes contend for bandwidth and CPU on slow networks, and on low-end devices the connection-pool overhead starts to matter.
Preconnect includes what dns-prefetch does, so adding both for the same origin is redundant. preconnect supersedes dns-prefetch when it succeeds.