Resource hints are an optimization tool that tell the browser in advance about resources it will need so it can get ready. Normally the browser discovers resources one by one as it parses HTML; a hint lets it discover them earlier or start connecting and downloading ahead of time, improving perceived load speed. But hints are suggestions, not commands, and overusing them wastes bandwidth — reserve them for genuinely important resources.
preconnect and dns-prefetch
These two get connection setup out of the way early. dns-prefetch just resolves DNS ahead of time, while preconnect goes further and completes the TCP handshake and TLS negotiation too. For an external origin you're sure to hit soon (a font CDN, image server, analytics domain), paying that round-trip cost up front means data flows the instant you actually request.
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">preload and modulepreload
preload fetches a resource the current page will need soon at high priority. You must declare its type with the as attribute (style, script, font, image, …) so the browser applies the right priority and CORS mode (fonts in particular need crossorigin). It shines for things the parser finds late — a font hidden inside CSS, or a resource a script requests dynamically. modulepreload is for ES modules, fetching a module and its dependency graph in advance and preparing them for parsing.
prefetch and prerender
Where the above serve the current page, these target the next navigation. prefetch downloads resources for a page the user is likely to visit next at low priority, during idle time, and caches them (e.g., the next page of pagination). prerender (and the modern Speculation Rules API) goes further, rendering the next page in the background so a click shows it instantly. It's costly, so use it only when your prediction is confident.
dns-prefetch: resolve DNS only — the lightest.preconnect: warm up DNS + TCP + TLS — for an external origin you'll use soon.preload: download a critical current-page resource at high priority now (asrequired).modulepreload: fetch an ES module and its dependencies and prep for parsing.prefetch: fetch a next-navigation resource at low priority.prerender: render the next page itself in the background.
Link header vs <link>
You can declare resource hints with an HTML <link> tag or with the HTTP Link response header. The header's advantage is that the browser sees the hint before it parses the HTML body. When a CDN or server attaches it to response headers, connecting and downloading can start even earlier.
HTTP/1.1 200 OK
Content-Type: text/html
Link: <https://cdn.example.com>; rel=preconnect
Link: </app.css>; rel=preload; as=style103 Early Hints
103 Early Hints (RFC 8297) is an informational status code that sends resource hints before the final response. While the server builds the actual page (say a 200 that needs a DB query), it first streams a 103 carrying Link: rel=preload/preconnect hints. The client uses that 'dead time' — while the server computes the real response — to start fetching resources, so by the time the final 200 arrives the critical assets are already in hand.
HTTP/1.1 103 Early Hints
Link: </app.css>; rel=preload; as=style
Link: </hero.jpg>; rel=preload; as=image
HTTP/1.1 200 OK
Content-Type: text/html
...In short, resource hints split into three layers — connection (preconnect/dns-prefetch), current-page resources (preload/modulepreload), and next navigation (prefetch/prerender) — delivered via the <link> tag, the Link header, or 103 Early Hints. The key is restraint: apply them, together with priority signals like fetchpriority, to only the important few.