Attribute preload

<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />

The browser caches preloaded resources so they are available immediately when needed. (It doesn’t execute the scripts or apply the stylesheets.)

Resource hints, for example, preconnectand prefetch, are executed as the browser sees fit. The preload, on the other hand, is mandatory for the browser. Modern browsers are already pretty good at prioritizing resources, that’s why it’s important to use preload sparingly and only preload the most critical resources.

What types of content can be preloaded?

Many content types can be preloaded.
The possible as attribute values are:

audio: Audio file, as typically used in
document: An HTML document intended to be embedded by a or .
embed: A resource to be embedded inside an <embed> element.
fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer, WebAssembly binary, or JSON file.
font: Font file.
image: Image file.
object: A resource to be embedded inside an
element.
script: JavaScript file.

style: CSS stylesheet.

track: WebVTT file.

worker: A JavaScript web worker or shared worker.

video: Video file, as typically used in

Including media
```
  <link
    rel="preload"
    href="bg-image-narrow.png"
    as="image"
    media="(max-width: 600px)" />
  <link
    rel="preload"
    href="bg-image-wide.png"
    as="image"
    media="(min-width: 601px)" />
```
Use cases
- Preloading resources defined in CSS(fonts, etc.)
- Preloading CSS files If you are using the critical CSS approach, you split your CSS into two parts. The critical CSS required for rendering the above-the-fold content is inlined in the <head> of the document and non-critical CSS is usually lazy-loaded with JavaScript. Waiting for JavaScript to execute before loading non-critical CSS can cause delays in rendering when users scroll, so it’s a good idea to use <link rel=“preload”> to initiate the download sooner.
- Preloading JavaScript files
Some types of resources, such as fonts, are loaded in anonymous mode. For those you must set the crossorigin attribute with preload:
```
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
```
You can also preload any type of resource via the Link HTTP header:
```
Link: </css/style.css>; rel="preload"; as="style"
```
A benefit of specifying preload in the HTTP Header is that the browser doesn’t need to parse the document to discover it, which can offer small improvements in some cases.

Attribute preload

What types of content can be preloaded?

Including media

Use cases