Glossary
Preload
`<link rel="preload">` instructs the browser to begin fetching a resource immediately, at high priority, before it would otherwise have discovered it. It is for resources the parser cannot see — a font referenced inside a stylesheet, a hero image set by CSS, a script loaded by another script. It changes when a fetch starts, not how fast it completes, so it helps only where discovery was genuinely the delay.
When it helps
A web font referenced in a stylesheet. The browser cannot know about it until the stylesheet has downloaded and been parsed, which is two round trips into the load.
A hero image set as a CSS background, which has the same discovery problem and is frequently the Largest Contentful Paint element.
A resource requested by a script, which the parser never sees at all.
A resource behind a redirect chain, where starting earlier compensates for a longer path.
Where it does not help: a resource already visible in the HTML near the top. The browser's preload scanner has already found it, and declaring it again gains nothing.
The as attribute is required
`as` states what the resource is — `font`, `image`, `style`, `script` — and determines the priority applied, the `Accept` header sent, and which content security policy directive governs it.
Omitting it causes the resource to be fetched with the wrong priority and, commonly, fetched twice: once by the preload and once by the real reference, because the browser cannot match them.
Fonts additionally require `crossorigin`, because font requests are made in anonymous mode. Omitting it produces exactly the same double fetch.
A double fetch is worse than no preload, and the console warns about it, which is the fastest way to notice.
How it differs from the neighbouring hints
`preload` fetches a resource this page will definitely use, at high priority.
`prefetch` fetches a resource a future navigation is likely to use, at the lowest priority, and it is speculative.
`preconnect` opens a connection to an origin without fetching anything, which saves the DNS, TCP and TLS setup.
`modulepreload` is the equivalent of preload for JavaScript modules, and additionally fetches the module's dependency graph.
How to use it without harm
Preload very few things — typically one font and one image. Preloading many resources makes them compete, and everything declared high priority means nothing is.
Verify in the network panel that the preloaded resource is fetched once and used. The console warns when a preload goes unused within a few seconds.
Measure before and after. If Largest Contentful Paint does not move, the delay was not discovery and the preload is not helping.
Remove preloads for resources that are no longer critical. A stale preload is pure waste and nothing else will flag it.
Frequently asked questions
- What is the difference between preload and prefetch?
- Preload fetches something this page needs, at high priority. Prefetch speculatively fetches something a later navigation might need, at the lowest priority.
- Why is my preloaded resource downloaded twice?
- Almost always a missing or wrong as attribute, or a missing crossorigin on a font, which prevents the browser matching the preload to the real request.
- Should I preload all my important resources?
- No. Preloading many resources makes them compete for the same bandwidth. One or two genuinely late-discovered resources is the useful case.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website