All three are resource hints and they answer different questions: what this page needs now, what the next page will need, and which server to warm up.
<!-- needed by this page, fetch at high priority -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<!-- probably needed next, fetch when idle -->
<link rel="prefetch" href="/js/checkout.js">
<!-- DNS, TCP and TLS to a third party, before the request -->
<link rel="preconnect" href="https://cdn.example.com">preload requires the as attribute — without it the browser fetches at the wrong priority and often downloads the resource twice, which is worse than not preloading. Fonts additionally need crossorigin even when same-origin, because font requests are made in CORS mode. preconnect is the cheapest of the three and the easiest to overuse: each one holds a connection open.