What is the difference between preload, prefetch, and preconnect?

These are resource hints — <link> tags that give the browser advance notice about resources it will need.

preload — fetch a resource needed by the current page immediately at high priority. Used for critical fonts, hero images, above-the-fold CSS.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.jpg" as="image" />

prefetch — fetch a resource likely needed for a future navigation at idle priority. Browser downloads it when bandwidth is free.

<link rel="prefetch" href="/checkout/bundle.js" as="script" />
{/* Next.js <Link> does this automatically for in-viewport links */}

preconnect — open a TCP connection (+ TLS handshake) to an origin early, without fetching a specific resource. Eliminates connection setup latency for cross-origin resources.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://api.example.com" /> {/* DNS only — cheaper */}