HTML - Resource Preloading

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:

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">
    .................
    <link rel="stylesheet" href="style.css">
</head>

Javascript

  • 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";
document.body.appendChild(preloadedScript);


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

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:

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:

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


Powered by ComboStrap