What are resource hints like preload, prefetch and preconnect?

What each one does

• preload — "I need this for the current page, fetch it now at high priority." For critical resources the parser discovers late: fonts, hero images, CSS-referenced assets. Requires as so the browser sets correct priority/headers.

• preconnect — "I'll connect to this origin soon; do the DNS lookup + TCP + TLS handshake now." Saves the round-trips before the first request to a third-party (API, font host, CDN). Use for a few critical origins.

• dns-prefetch — a lighter version of preconnect: just the DNS resolution. Good fallback / for many origins.

• prefetch — "I'll probably need this for the next navigation; fetch it at low priority when idle." For likely-next pages/assets. Cached for the future, not the current page.

A common real example: fonts

Fonts are discovered late (the browser must parse CSS first), so preloading them avoids invisible-text delays.

Caution: don't over-hint

Preloading everything defeats the purpose — it competes with genuinely critical resources for bandwidth. Hint only the few that matter most.

Why it matters

Resource hints shave latency off the critical path: preconnect removes handshake delay for third parties, preload prioritizes late-discovered critical assets (fonts, LCP image), and prefetch makes the next navigation feel instant.

Used surgically, they meaningfully improve Core Web Vitals.