Preload Prefetch — HTML

Resource Hints: Preload, Prefetch, Preconnect

Resource hints are <link> variants that tell the browser about resources or connections you'll need soon, so it can start work early instead of waiting to discover them naturally while parsing.

rel="preload" — fetch it now, this page needs it

preload tells the browser to fetch a resource at high priority for the current page, because you know it is critical but the browser might otherwise discover it late (a font referenced only inside CSS, a hero image loaded via JavaScript, critical CSS itself).

HTML

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.webp" as="image" />
<link rel="preload" href="/styles/critical.css" as="style" />

The as attribute is required

The as attribute tells the browser what kind of resource is being preloaded, which lets it apply the right request priority, set the correct Accept header, and match the request against later usage (so it isn't fetched twice). Omitting it causes many browsers to ignore the preload, or to fetch the resource twice.

as value	Used for
script	JavaScript files
style	CSS stylesheets
font	Web fonts (also requires crossorigin)
image	Images
fetch	Resources fetched via fetch()/XHR, typically with crossorigin

rel="prefetch" — fetch it later, next page needs it

prefetch is a low-priority hint for resources the user will likely need on a future navigation — not this page. The browser fetches it during idle time and caches it, so the next page (if visited) loads faster.

HTML

<!-- On a product listing page, prefetch the likely-next product page's script -->
<link rel="prefetch" href="/product/42/bundle.js" as="script" />

rel="preconnect" and rel="dns-prefetch"

Both hints prepare a connection to another origin before you actually request anything from it, so the real request (when it happens) skips connection setup time.

HTML

<!-- Full connection setup: DNS + TCP + TLS -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Cheaper fallback: DNS lookup only -->
<link rel="dns-prefetch" href="https://analytics.example.com" />

Hint	What it does early	Best for
dns-prefetch	DNS lookup only	Many third-party origins you might touch
preconnect	DNS + TCP handshake + TLS negotiation	A handful of origins you know you will request from very soon
preload	Full fetch of a known resource, high priority	Critical current-page assets
prefetch	Full fetch of a resource, low priority	Assets needed by a likely next navigation

preconnect is relatively expensive to keep open — limit it to origins you are confident you will use (fonts, a CDN, an API host).
dns-prefetch is cheap and can be sprinkled more liberally.
preload should be reserved for resources that are genuinely critical to the current page render — overusing it competes for bandwidth with everything else.

Tip

A common, effective pattern for web fonts is combining preconnect to the font host with preload for the actual font file, so both the connection and the file are ready before the CSS asks for them.

Warning

Preloading a resource that ends up unused (or used more than a few seconds after load) triggers a browser console warning and wastes bandwidth that could have gone to resources the page actually needs first.

Note

Modern HTTP/2 and HTTP/3 servers can also send preload hints as actual HTTP Link response headers, which arrive even earlier than an HTML <link> tag the browser must first parse.