web:html:preload

About

preload ¹⁾ 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 );
})

Rendered by WebCode

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>.
document: An html document intended to be embedded by a <frame> or <iframe>.
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

¹⁾

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

Table of Contents

About

CSS

Javascript

Running script and adding stylesheet on demand after the load event

As

As value (media)

Video

Image (Responsive Preloading)

Javascript

CSS Stylesheet