Resource Hints and Priorities

Prerequisites: Loading performance

Resource hints tell the browser about resources before it would find them on its own.

<link rel="dns-prefetch" href="https://analytics.example">
<link rel="preconnect" href="https://fonts.example" crossorigin>
<link rel="preload" href="/img/hero.avif" as="image" type="image/avif" fetchpriority="high">
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
<link rel="modulepreload" href="/js/app.js">
<link rel="prefetch" href="/checkout.html">

Hint	What it does	Use for
`dns-prefetch`	Looks up the domain name	Third-party origins you'll use later
`preconnect`	DNS + TCP + TLS handshake	1–3 critical third-party origins
`preload`	Downloads the resource now, at high priority	Critical files discovered late: fonts, a CSS background hero image
`modulepreload`	Downloads and parses a JavaScript module	Modules and their imports
`prefetch`	Downloads at low priority for a future navigation	The likely next page

Using preload correctly

as is required — it sets the priority, the Accept header, and lets the browser reuse the download. Without it, or with the wrong value, the file may be fetched twice.
Fonts must be preloaded with crossorigin — even from your own site — because fonts are always fetched in CORS mode.
Everything you preload competes with everything else. Preloading ten files is the same as preloading none. The browser console warns about preloads that weren't used within a few seconds.
Don't preload what the preload scanner already finds early (an img in the HTML); fetchpriority on the element is enough.

The validator checks the combination:

<!-- Wrong: preload without "as" -->
<link rel="preload" href="/fonts/brand.woff2">

error: A 'link' element with a 'rel' attribute that contains the value 'preload' must have an 'as' attribute.

Responsive preloads

To preload an image that's chosen by srcset, mirror its attributes:

<link rel="preload" as="image"
      imagesrcset="/img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
      imagesizes="100vw">

Priority hints

fetchpriority="high" | "low" | "auto" works on img, link, script, and iframe, and on fetch(). Use high for the LCP image, and low for things like carousel images that aren't visible yet.

Server-side hints

Servers can send hints before the HTML is ready with a Link HTTP header or an HTTP 103 Early Hints response:

HTTP/2 103
link: </css/site.css>; rel=preload; as=style
link: <https://cdn.cornerbakery.example>; rel=preconnect

The browser starts those connections and downloads while the server is still generating the page.

Speculation rules

Chromium-based browsers also support speculation rules — a JSON script type="speculationrules" block that asks the browser to prefetch or even prerender likely next pages. Other browsers ignore it, so it's safe as an enhancement.