Preload Hints
Preload hints tell the browser to fetch a critical resource early with high priority, before the parser discovers it deep in HTML or CSS, cutting latency on the critical path.
Definition
A preload hint is a declarative link relation that instructs the browser to start fetching a resource immediately with a priority the developer controls, using the as attribute to pick the cache bucket and priority class. It exists so late-discovered dependencies such as fonts, scripts, or hero images start downloading before the rendering path finds them.
Context and scope
Applied to fonts referenced inside CSS, above-the-fold images, late-discovered scripts, and CSS files loaded by render-blocking stylesheets. Also emitted by early hints from the server before the full response is ready.
Common misconceptions
- Preload makes a resource render — it only fetches bytes; parsing and execution still wait for the consumer
- Preload and prefetch are interchangeable — preload is urgent and high priority, prefetch is speculative
- More preload hints mean a faster page — each hint competes for bandwidth with genuinely critical resources
Anti-patterns
- Preloading everything visible in the HTML head regardless of actual criticality
- Omitting the as attribute, which breaks priority assignment and double-fetches the resource
- Preloading resources that the page never uses, wasting bandwidth on mobile networks
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
What it is
The preload keyword on a link element starts a fetch for a resource the current navigation will certainly need. The browser allocates cache storage and priority based on the destination type, so a preloaded font arrives before CSS finishes parsing and reveals the font face. It is a scheduling instruction, not a request to use the resource.
How it works
Each hint specifies href, the destination via as, and optionally type, crossorigin, and fetchpriority. The fetch starts when the hint is parsed, reuses the HTTP cache, and deduplicates against later parser-discovered requests. A mismatch between the hinted destination and the real request causes a second download and a console warning.
When to use it
Preload resources discovered late but needed early: fonts declared in CSS, hero images above the fold, critical scripts, and the CSS of a render-blocking import chain. Server-driven early hints can push the same declarations before HTML generation completes.
Pitfalls
Preload competes for the same bandwidth pool as everything else, so over-preloading delays the critical path it was meant to protect. Resources with crossorigin requirements must match exactly or they fetch twice. Measure with resource timing and confirm each hint moves a request earlier rather than adding duplicate traffic.