Widely available Powerful when applied precisely to critical resources, but easy to misuse if over-applied.

<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.

PerformanceResource hintsLoading

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.link.rel.preload
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-fetch

`as=fetch`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-font

`as=font`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-image

`as=image`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-script

`as=script`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-style

`as=style`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-track

`as=track`
50
79
11.1
50
11.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Disabled due to various web compatibility issues (e.g. bug 1405761).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Disabled due to various web compatibility issues (e.g. bug 1405761).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Disabled due to various web compatibility issues (e.g. bug 1405761).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Disabled due to various web compatibility issues (e.g. bug 1405761).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Disabled due to various web compatibility issues (e.g. bug 1405761).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Disabled due to various web compatibility issues (e.g. bug 1405761).

Syntax

HTML 
<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 categories

Compare the assets commonly loaded with rel=preload.

PreviewFullscreen

Preload lifecycle

Describe preload as an early fetch hint rather than an execution trigger.

PreviewFullscreen

Preload checklist

Use explicit types and only preload assets that are definitely needed.

PreviewFullscreen

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.

Related links