Generate <link rel="preload">, prefetch, preconnect, dns-prefetch, and modulepreload tags with the right as, type, crossorigin, fetchpriority, and media attributes. Live HTTP Link: header output and validity hints.
<head>(no hints yet)
Link: headerEquivalent RFC 8288 response header — early-flush from your origin or CDN before the HTML body to start fetches sooner.
(no hints yet)
| Hint | When | Cost |
|---|---|---|
preload | Critical sub-resources for this page (LCP image, web fonts, hero CSS the browser can't yet see). High | Fetched immediately; wastes bytes if unused. |
prefetch | Resources likely needed for the next navigation (link a user is hovering, prerendered route bundle). Low | Low-priority idle fetch; cached for later. |
preconnect | You will request from a 3rd-party origin soon and want DNS + TCP + TLS already done. | One socket per origin; use sparingly (2–4 max). |
dns-prefetch | Cheaper fallback to preconnect when you have many 3rd-party origins and just want the DNS resolved. | Negligible. |
modulepreload | An ES module (and its dependency graph) you'll import shortly. | Fetches the module + recursively follows static imports. |
| rel | href | as | crossorigin | type |
|---|---|---|---|---|
preload | Required | Required — without it the browser can't prioritize and may double-fetch. | Required for fonts (always anonymous); required for cross-origin fetch/script/style. | Recommended for fonts & images so the browser can skip unsupported formats. |
prefetch | Required | Optional (but recommended). | Optional. | Optional. |
preconnect | Origin only (no path). | — | Required if the origin will be hit with credentialed requests or for fonts. | — |
dns-prefetch | Origin only. | — | — | — |
modulepreload | Required. | — | For cross-origin modules. | Always module implicit. |
crossorigin: the browser preloads but can't reuse the response → the actual @font-face fetch starts from scratch. Always crossorigin="anonymous" for fonts, even same-origin.as="image" with imagesrcset/imagesizes: required so the preload matches the eventual <img> selection, otherwise the browser fetches the wrong size.preconnect without using the origin: wastes a socket the user paid for. Pair it with an actual request within ~10s.modulepreload only matches ES modules — for classic scripts use preload as="script".