Resource hints (preconnect / preload / prefetch / dns-prefetch)

What it is

Four `<link rel=...>` types defined in the WHATWG HTML Living Standard (originally W3C Resource Hints, since folded in): `dns-prefetch` (resolve DNS), `preconnect` (DNS + TCP + TLS), `preload` (fetch a resource for the current navigation), `prefetch` (fetch a resource for the next navigation). Each is a different point on the eager-vs-speculative spectrum.

Why it matters

On a typical commerce page the critical-render path waits for hosts you know in advance — your CDN, Stripe, a font CDN, an analytics endpoint. A handful of `preconnect` hints saves ~100–500ms each because TLS handshakes happen in parallel rather than after HTML parse. `preload` for the LCP image is one of the highest-leverage CWV wins available.

Who it applies to

Every site with third-party origins or a known above-fold critical asset.

How WQI scores it

Web Quality Index considers this standard satisfied when the supporting factor passes.

Related standards

See also

CWV , LCP , font-display , WebP / AVIF

Standards that share factors with this one

Auto-computed from overlapping factor tickets in satisfiedBy, excluding standards already listed under "See also" above. Strong overlap suggests these standards rise and fall together when sites are scored.

• Mobile viewport meta tag 1 shared factor SEO `<meta name="viewport" content="width=device-width, initial-scale=1">` — one line that decides whether your site is usable on a phone. Mobile-first indexing means without it you don't rank.
• Speed Index 1 shared factor Performance Average time at which visible parts of the page are displayed, computed from a frame-by-frame video of the load. Captures `feels fast` better than any single milestone metric.

Other references

• guidance MDN — rel=preload
• guidance web.dev — preconnect and dns-prefetch