About
preload 1) is a loading mode for a resource during a page load.
When a resource (file) got the preload hints, the browser knows that the resource is not needed during the page load, but will be used later.
The preload value of the <link> element's rel attribute allows you to:
- write declarative fetch requests in the HTML <head>
- specifying resources that your pages will need very soon after loading
- which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in.
This ensures that they are made available earlier and are less likely to block the page's first render
Example
CSS
Load in parallel CSS in the head element
<head>
<link rel="preload" href="style.css" as="style">
<!-- then later dynamically via javascript, you can add this element to load it -->
<link rel="stylesheet" href="style.css">
</head>
Javascript
- The script to preload
let preloadedModuleVariable = "Yolo!"
- In your head element
<link rel="preload" href="/_export/code/web:html:preload?codeblock=1" as="script">
- In your javascript code
// Check the the preloaded script has not yet ran
if(typeof preloadedModuleVariable === "undefined"){
console.log("The preloaded script has not yet run");
}
// Loading the script
let preloadedScript = document.createElement("script");
preloadedScript.src = "/_export/code/web:html:preload?codeblock=1";
document.body.appendChild(preloadedScript);
// Check the the preloaded script has run
preloadedScript.addEventListener("load", function(){
console.log("The preloaded script has run: "+preloadedModuleVariable );
})
Usage
Running script and adding stylesheet on demand after the load event
All resources (even async or defer scripts) present in a page will block the load event (in case of script, it may also delay the Largest ContentFull Paint. With preload, you can add them on demand or explicitly run them after it.
Syntax
As
as specify the type of content to be preloaded allows the browser to:
- Prioritize resource loading more accurately.
- Match future requests, reusing the same resource if appropriate.
- Apply the correct content security policy to the resource.
- Set the correct Accept request headers for it.
As value (media)
The possible as attribute values are:
- audio: Audio file, as typically used in <audio>.
- 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 or JSON file.
- font: font file with the Font element
- image: Image file with the img element
- object: A resource to be embedded inside an <object> element.
- script: JavaScript file with the script element
- style: CSS stylesheet with the link element
- track: WebVTT file.
- worker: A JavaScript web worker or shared worker.
- video: Video file, as typically used in <video>.
Syntax Example by Resource Type
Video
Example with a video
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
Image (Responsive Preloading)
Responsive Preloading.
<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)">
Javascript
To defer script execution until exactly you need it.
Example:
- preload the JavaScript file, creating a link element
var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
- using it
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
CSS Stylesheet
CSS - Style Sheet (Script|File) - Stylesheet - (Ref: Critical CSS path)
In the head
<link href="style.css" rel="preload" as="style">
Use it
- in the HTML (where you want to use the stylesheet
<link href="style.css" rel="stylesheet" >
- dynamically:
let head = document.querySelect("head");
let link = document.createElement('link');
link.rel="stylesheet"
link.href="style.css";
head.append(link);
Adding a stylesheet in the body that have a big impact at the end of a page load will occurs a FOUC