preload value of the
rel attribute lets you declare fetch requests in the HTML’s
specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle.
most commonly use
<link> to load a CSS file to style your page with:
<link rel="stylesheet" href="css/main.css">
Here however, we will use a
rel value of
preload, which turns
<link> into a preloader for any resource we want:
- The path to the resource in the
- The type of resource in the
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
- Resources that are pointed to from inside CSS, like fonts or images.
- Larger images and video files.
preload has other advantages too. Using
as to specify the type of content to be preloaded allows the browser to:
- Prioritize resource loading more accurately.
- Store in the cache for future requests, reusing the resource if appropriate.
- Apply the correct content security policy to the resource.
- Set the correct
Acceptrequest headers for it.
Types of preload
audio: Audio file, as typically used in
font: Font file.
image: Image file.
style: CSS stylesheet.
video: Video file, as typically used in
fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
|Firefox Android||Not support|