resource hints

Resource Hints — Live Demos

preload · prefetch · preconnect · speculation rules

The five hints as a spectrum — lightest to heaviest

Each hint does more of the network work ahead of time. Click one to see what it does and where it acts.

dns-prefetchDNS only
preconnectDNS+TCP+TLS
preloadfetch (now)
modulepreloadfetch+compile
prefetchnext page
--:--:--Click each hint to compare what it does

Connection warming — watch the handshakes disappear

See how a request to a third-party origin unfolds with no hint, with dns-prefetch, and with preconnect. The colored segments are the network phases.

cdn.example.com
DNS lookup TCP handshake TLS negotiation Resource download warmed early (off critical path)
--:--:--Switch hints — watch handshakes move off the critical path

Preload playground — the as & crossorigin traps

Configure a font preload and see whether the browser fetches it once (correct) or twice (a trap). This is the #1 preload bug.

include as="font"
include crossorigin
include type="font/woff2"
the font is actually used on the page
--:--:--Toggle crossorigin off and simulate — see the double fetch

Speculation Rules — the modern prerender

<link rel="prerender"> is dead. Build a Speculation Rules block that prefetches or prerenders the next page with an eagerness level.

immediate
eager
moderate
conservative
Generated block
⚠ Speculation Rules target document URLs → for multi-page apps, not SPA route changes. Chromium-only (not yet Baseline).
--:--:--Build a rule — adjust eagerness to trade instantness vs wasted work

Which hint should I use?

Answer the question and get the right hint with the correct attributes.

What are you trying to speed up?
--:--:--Pick what you want to speed up for the right hint