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

<link rel="preload">

rel="preload" tells the browser to fetch a resource early because it will be needed soon for the current page. It is commonly used for fonts, styles, scripts, and media.

PerformanceResource hintsLoading

Overview

rel="preload" tells the browser to fetch a resource early because it will be needed soon for the current page. It is commonly used for fonts, styles, scripts, and media.

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

Powered by web-features