What are Resource Hints?

What are resource hints?

Resource hints are short instructions, written as <link rel="..."> tags or Link headers, that tell the browser which origins or files it will probably need, so it can start work early. The usual set is dns-prefetch, preconnect, preload, prefetch and prerender; MDN also lists modulepreload for JavaScript modules. A hint is a suggestion, and the browser may ignore it.

Which hint answers which question

• Will the page use another origin soon? preconnect does the DNS lookup, TCP connection and TLS handshake ahead of time. It has no benefit for your own origin, and MDN advises using it only for your most critical cross-origin connections. dns-prefetch does only the DNS step, which suits less important origins.
• Does the current page need a file it finds late? preload fetches it early at high priority, for example an LCP image set in CSS or a web font. It needs an as value, and font files need crossorigin. modulepreload is the version for JavaScript modules. Details are in preloading for assets.
• Might a later page need a file? prefetch fetches it at low priority into the HTTP cache for a likely next navigation. It is blocked by Cache-Control: no-store and no-cache, and it does not help across sites. See prefetching resources.
• Is a whole next page very likely? prerender was meant to render it in advance, but MDN now calls it deprecated and Chrome-only: it only fetches the document and the resources it can find into the HTTP cache. For a real prerender, use the Speculation Rules API; see prerendering.

Related but different: the fetchpriority attribute raises or lowers a request's priority. It does not make the browser find a file sooner, so it is often combined with preload for an image set in CSS. For the connection costs that preconnect and dns-prefetch save, see network connections and page speed.

Example

A landing page loads fonts and a script from a CDN, shows a hero image set in CSS, and links to a pricing page most visitors open next. Four lines in the head cover it:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/pricing">

The first three help this page load. The last one warms the cache for the next page, at low priority.

Common mistakes

• Using too many. MDN warns that preloading everything removes the benefit, and preconnecting to many origins can backfire.
• Hinting something the page never uses. A preload or prefetch for an unused file spends bandwidth for nothing.
• A wrong as value or a missing crossorigin. The browser then cannot match the hint to the real request and may download the file twice.
• Relying on prerender. It is deprecated and no longer renders the page; use Speculation Rules where supported and treat them as an enhancement.
• Prefetching URLs with side effects. A prefetched logout or add-to-cart link still reaches your server.
• Never measuring. A hint changes what the browser does, so compare the waterfall and Largest Contentful Paint with and without it.

How it relates to testing and monitoring

Check each hint in a waterfall: the file should start earlier, and the metric you wanted to improve should move. Test on a throttled connection and from more than one place, because a hint that helps near your server may do little far away. LoadFocus page speed monitoring runs Google Lighthouse audits on a schedule from 25 cloud regions, with alerts when a score or metric slips. The free Core Web Vitals checker shows real-user LCP, INP and CLS from Google's CrUX data. For the wider list of frontend fixes, read the 10-step guide to improving website speed, and see the MDN guide to speculative loading for exact syntax.

FAQ: resource hints

What are the resource hints?

dns-prefetch, preconnect, preload, prefetch and prerender, plus modulepreload for JavaScript modules. Prerender is deprecated in favour of Speculation Rules.

What is the difference between preload and prefetch?

Preload fetches a file the current page needs soon, at high priority. Prefetch fetches a file a later page may need, at low priority.

When should I use preconnect instead of dns-prefetch?

Use preconnect for the few cross-origin servers you will definitely use right away, because it also opens the connection. Use dns-prefetch for less important origins, because it only resolves the hostname.

Does fetchpriority replace preload?

No. Fetchpriority changes how urgently the browser fetches a file it already knows about. Preload makes the browser discover a file earlier. They can be used together.

Can resource hints slow my site down?

Yes. Too many hints compete for bandwidth and connections with files that matter more. Keep them to the few that gate the first render and measure the result.