HTML - Resource Preloading


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:

This ensures that they are made available earlier and are less likely to block the page's first render



Load in parallel CSS in the head element

    <link rel="preload" href="style.css" as="style">
    <link rel="stylesheet" href="style.css">


  • The script to preload
let preloadedModuleVariable = "Yolo!"
<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";

// Check the the preloaded script has run
preloadedScript.addEventListener("load", function(){
   console.log("The preloaded script has run: "+preloadedModuleVariable );



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:

Syntax Example by Resource Type


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)">


To defer script execution until exactly you need it.


var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload"; = "script";
  • using it
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";

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');

Adding a stylesheet in th body that have a big impact at the end of a page load will occurs a FOUC

Powered by ComboStrap