Resource Hints

Resource hints are directives delivered through the HTTP Link header (or HTML <link> elements) instructing browsers to perform early network operations (resolving DNS, opening connections, fetching resources, or preparing modules) before the browser discovers the need through normal parsing. These hints reduce latency by starting work during idle time or while the server is still generating the response.

Usage

The HTTP Link header delivers resource hints as comma-separated entries in a single header.

Link: <https://cdn.example.re>; rel=preconnect, </css/main.css>; rel=preload; as=style, </js/app.js>; rel=preload; as=script

Browsers process Link headers before the HTML body arrives, giving resource hints a timing advantage over HTML <link> elements in the document head. When combined with 103 Early Hints, the browser begins acting on resource hints while the server is still generating the final response.

The five active hint types form a spectrum from lightest (DNS resolution only) to heaviest (full resource fetch and compilation):

"Required" indicates whether compliant browsers must act on the hint. Preload and modulepreload are mandatory fetches: the browser is expected to download the resource. The others are advisory hints browsers follow at their discretion.

dns-prefetch

The dns-prefetch hint performs DNS resolution for a cross-origin domain in advance, eliminating DNS lookup latency (typically 20-120ms) when the browser later requests resources from the origin.

Link: <https://analytics.example.re>; rel=dns-prefetch

DNS prefetching is the lightest hint. It resolves the domain name to an IP address without opening a TCP connection or performing a TLS handshake. The overhead is negligible, making dns-prefetch safe to apply broadly to third-party domains expected to be used during the page load.

dns-prefetch is only meaningful for cross-origin domains. Same-origin DNS is already resolved from the initial page request.

Link: <https://cdn.example.re>; rel=preconnect,
      <https://cdn.example.re>; rel=dns-prefetch

preconnect

The preconnect hint establishes an early connection to a cross-origin server: DNS resolution, TCP handshake, and (for HTTPS Origins) TLS negotiation. When the browser later fetches a resource from the origin, the connection is already warm.

Link: <https://cdn.example.re>; rel=preconnect

crossorigin

The crossorigin attribute controls whether the preconnected connection uses CORS mode. Browsers maintain separate connection pools for CORS and non-CORS requests. A preconnect without crossorigin opens a non-CORS connection (used for CSS, images). A preconnect with crossorigin opens a CORS connection (used for fonts, fetch() calls).

When an origin serves both CORS and non-CORS resources, two preconnect hints are needed:

Link: <https://cdn.example.re>; rel=preconnect, <https://cdn.example.re>; rel=preconnect; crossorigin

Fonts always require crossorigin because the CSS font-face specification mandates anonymous CORS mode for font requests regardless of origin. A preconnect without crossorigin is not reused for font fetches.

prefetch

The prefetch hint fetches a resource at low priority for future navigation, the next page the user is likely to visit. The browser downloads and caches the resource during idle time, making the subsequent navigation faster.

Link: </next-page>; rel=prefetch

Prefetched resources are stored in the HTTP disk cache and follow standard HTTP Caching rules. A resource with Cache-Control: no-store is not prefetched. The browser assigns the lowest priority to prefetch requests, so current-page resources always take precedence.

Servers detect prefetch requests through the Sec-Purpose: prefetch Request header.

Cache partitioning

Modern browsers partition their HTTP cache by top-level site. Prefetching a cross-site resource from one site does not populate the cache for the destination site. Cross-site prefetch is unreliable for navigation optimization.

preload

The preload hint declares a mandatory, high-priority fetch for a resource needed on the current page. Unlike advisory hints, compliant browsers are expected to fetch preloaded resources. Preload downloads and caches the resource but does not execute the resource. A preloaded script is fetched but not run until the browser encounters the corresponding <script> tag.

Link: </css/main.css>; rel=preload; as=style
Link: </font/body.woff2>; rel=preload; as=font; crossorigin
Link: </img/hero.webp>; rel=preload; as=image

The `as` attribute

The as attribute is required for preload. The value tells the browser the resource type, which determines internal fetch priority, correct Accept headers, and Content Security Policy checks.

Without as, the browser treats the resource as a generic async request at high priority. The resource is fetched but cannot be matched to its eventual consumer, often causing a double download: once from the preload and again when the browser parses the HTML and requests the resource normally.

fetchpriority

The fetchpriority attribute adjusts priority relative to the default for the resource type:

Link: </img/hero.webp>; rel=preload; as=image; fetchpriority=high

• fetchpriority="high": signals the browser to fetch the resource at higher priority than the default for its type
• fetchpriority="low": signals the browser to deprioritize the resource relative to others of the same type
• fetchpriority="auto": browser default

crossorigin for fonts

Fonts require crossorigin on the preload hint, even when served from the same origin. The font-face specification mandates anonymous CORS mode for all font requests. A preload without crossorigin opens a non-CORS connection, and the font request opens a separate CORS connection, wasting the preload.

Link: </font/body.woff2>; rel=preload; as=font; crossorigin

modulepreload

The modulepreload hint fetches, parses, compiles, and registers an ES module in the document's module map. Unlike preload (which only downloads), modulepreload makes the module ready for immediate execution when imported.

Link: </js/main.mjs>; rel=modulepreload
Link: </js/components/nav.mjs>; rel=modulepreload

Explicitly listing all critical module dependencies as separate modulepreload hints enables parallel downloads of a module tree otherwise fetched sequentially as import statements are encountered.

The as attribute defaults to script for modulepreload and is optional. CORS mode is always applied. Modules use cors by default.

prerender (deprecated)

The original rel="prerender" loaded and rendered an entire page in a hidden tab for near-instant navigation. Chromium-based browsers downgraded prerender to a basic prefetch (no rendering, no subresource loading), and Firefox and Safari never supported the feature.

The Speculation Rules API is the modern replacement. Delivered through a <script type="speculationrules"> block or the Speculation-Rules HTTP header, speculation rules provide both prefetch and full prerender with configurable eagerness levels and resource limits.

103 Early Hints

The 103 Early Hints informational response sends preliminary Link headers while the server is still generating the final response. The browser begins acting on resource hints during "server think time," the interval spent on database queries, template rendering, and other backend processing.

HTTP/2 103 Early Hints
Link: </css/main.css>; rel=preload; as=style
Link: <https://cdn.example.re>; rel=preconnect

HTTP/2 200 OK
Content-Type: text/html
Link: </css/main.css>; rel=preload; as=style

The 103 response arrives before the 200 response. The browser starts preloading the stylesheet and preconnecting to the CDN immediately, reclaiming what is otherwise idle network time.

Preconnect and preload are the two hint types effective in 103 responses. Early Hints work over HTTP/2 and HTTP/3 connections. Nginx, Apache (mod_http2), Node.js, Cloudflare, and Fastly support 103 Early Hints.

Link header support

Not all rel values work reliably through the HTTP Link header. Browsers process a limited set of resource hint types from Link headers.

For maximum compatibility, preconnect and preload are the most reliable resource hints to deliver via HTTP Link headers. Other hint types work more consistently as HTML <link> elements.

Example

A typical set of resource hints for a page loading fonts from a CDN, a critical stylesheet, a hero image, and an analytics script.

Link: <https://cdn.example.re>; rel=preconnect; crossorigin, <https://cdn.example.re>; rel=preconnect, </css/above-fold.css>; rel=preload; as=style, <https://cdn.example.re/fonts/body.woff2>; rel=preload; as=font; crossorigin, </img/hero.webp>; rel=preload; as=image; fetchpriority=high, <https://analytics.example.re>; rel=dns-prefetch

Two preconnect hints target the CDN: one with crossorigin for font requests (CORS mode) and one without for CSS and images (non-CORS mode). The critical stylesheet, primary font, and hero image are preloaded at appropriate priorities. The analytics domain receives a lightweight dns-prefetch since the analytics script is non-critical.

A 103 Early Hints exchange demonstrating how hints arrive before the final response.

Request

GET /page HTTP/2
Host: example.re

103 response (immediate)

HTTP/2 103
Link: </css/main.css>; rel=preload; as=style
Link: <https://cdn.example.re>; rel=preconnect

200 response (after server processing)

HTTP/2 200
Content-Type: text/html
Link: </css/main.css>; rel=preload; as=style

The browser starts fetching main.css and opening a connection to the CDN as soon as the 103 response arrives. By the time the 200 response arrives with the HTML, the stylesheet is already downloaded or in-flight.

An ES module tree loaded with modulepreload hints.

Link: </js/main.mjs>; rel=modulepreload, </js/components/nav.mjs>; rel=modulepreload, </js/components/hero.mjs>; rel=modulepreload, </js/lib/utils.mjs>; rel=modulepreload

All four modules download in parallel. Without modulepreload, the browser discovers each dependency sequentially as the browser parses import statements. Each module waits for its parent to download, parse, and encounter the import before the next download begins.

Takeaway

Resource hints instruct browsers to perform early network operations, from lightweight DNS prefetching to full resource preloading, through the HTTP Link header. Preconnect warms connections to critical third-party origins. Preload fetches assets needed on the current page at high priority. Modulepreload prepares ES modules for immediate execution. Combined with 103 Early Hints, resource hints start working before the HTML arrives, reducing latency and improving load performance.

See also

• RFC 8288: Web Linking
• RFC 8297: 103 Early Hints
• Link
• 103 Early Hints
• Speculation-Rules
• Hreflang
• HTTP Streaming
• HTTP headers