<link rel="preconnect">
Opens the connection to another origin before the first request — DNS, TCP and TLS paid up front.
It announces that the page will fetch something from that origin soon. The browser resolves the name, opens the TCP connection and negotiates TLS while still reading the rest of the <head> — and the first real request finds the road already paved, saving a full round trip on slow networks.
The myth is sprinkling preconnect over every domain on the page: an open connection costs CPU and network on both ends, and the browser ignores the excess. Save it for the two or three critical origins — and, for fonts, crossorigin is mandatory, because the fetch is CORS and without it the opened connection is the wrong one.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">