How to preload HTML resources ? such as Javascript and StyleSheet


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">
    <!-- then later dynamically via javascript, you can add this element to load it -->
    <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 );


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.



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 the body that have a big impact at the end of a page load will occurs a FOUC

Powered by ComboStrap