Preload vs preconnect: two early hints

Preload vs preconnect: two early hints

Both are <link> tags that warm things up before the browser asks. But they do different jobs. Preconnect opens an early handshake with another server (like a font host). Preload fetches one specific file you know you'll need.

Think of preconnect as calling ahead to the restaurant, and preload as ordering your dish before you arrive.

When to use which:
— You load fonts or images from a third-party domain: preconnect to that domain.
— You have one critical file (your LCP image, a key font) that loads late: preload it.

Try this: add <link rel="preconnect"> for each outside domain in your page source, but only for the ones that load early. Two or three is plenty. Too many actually slows things down.