<link rel="preload">
The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. Even though the name contains the term load, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 50 | 79 | 85 | 11.1 | 50 | 11.3 | |
rel (preload as-fetch) `as=fetch` | 50 | 79 | 85 | 11.1 | 50 | 11.3 |
rel (preload as-font) `as=font` | 50 | 79 | 85 | 11.1 | 50 | 11.3 |
rel (preload as-image) `as=image` | 50 | 79 | 85 | 11.1 | 50 | 11.3 |
rel (preload as-script) `as=script` | 50 | 79 | 85 | 11.1 | 50 | 11.3 |
rel (preload as-style) `as=style` | 50 | 79 | 85 | 11.1 | 50 | 11.3 |
rel (preload as-track) `as=track` | 50 | 79 | | 11.1 | 50 | 11.3 |
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- Disabled due to various web compatibility issues (e.g. bug 1405761).
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- Disabled due to various web compatibility issues (e.g. bug 1405761).
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- Disabled due to various web compatibility issues (e.g. bug 1405761).
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- Disabled due to various web compatibility issues (e.g. bug 1405761).
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- Disabled due to various web compatibility issues (e.g. bug 1405761).
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- Disabled due to various web compatibility issues (e.g. bug 1405761).
Syntax
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/app.js" as="script">Live demo
Preload lifecycle
Preload starts the fetch early, but a normal consumer still has to pick the resource up.
Preload checklist
Use explicit types and only preload assets that are definitely needed.
Use cases
-
Critical path assets
Prioritize key fonts, styles, or scripts that are guaranteed to matter to the initial view.
-
Early media fetches
Start loading hero imagery or other high-priority assets before normal discovery would find them.
Cautions
- Incorrect as/type settings or preloading non-critical assets can reduce performance rather than improve it.
- Preload should reflect actual need on the current page, not speculative desire for every possible future asset.
Accessibility
- Stable and faster first paint can improve orientation, especially when the page relies on custom fonts or key imagery.