tl;dr: Use <link rel="preconnect" href="https://api.example.com" /> if you know your website will make requests to your API, thumbnail, CDN endpoints etc.

Assuming your origin is on HTTPS, preconnect does DNS lookup, TCP connect, and TLS negotiation. So, by the time, you actually use fetch to connect to your endpoint, the fixed cost of making the request has already been paid and your first request will be faster.

<link rel="preconnect" href="https://api.example.com" />