How to preload HTML resource (Javascript, 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

Discover More
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
HTML - The link element (inter-document relationships)

The link represents metadata that expresses inter-document relationships. hyperlink The link element can be used only within the head element. where: media is a list of media query separated...
HTML - Video Element (Movie)

The video represents a video or movie. It can be lazy or preloaded. * or without the child sub element To overcome that the images overflow their container, you can use this rule
How to create responsive images in HTML ? (from A to Z)

This article regroups all information about responsive image
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
Html Script Async Vs Defer
What is the difference between the Async and Defer Script attribute ?

The script HTML element has two asynchronous loading method that may be chosen via the presence of the async or defer attribute. Asyncdeferresource fetch instructions In a page load, the following...

Share this page:
Follow us:
Task Runner