Differences between Preload, Prefetch, and Preconnect?

Resource hint has become vital for high-performance applications. We can achieve a resource hint link in different ways.

According to W3 A resource hint is a dns-prefetch, preconnect, or prerender relationship that is used to indicate an origin or resource that should be connected to, or fetched, by the user agent.

preconnect

The preconnect directive is used to set up early connections to the server before an HTTP request is sent to the server.

The early connections reduce roundtrip latency and save time for users.

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>