HTML - Resource Preloading

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:

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

Syntax

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.

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS preload example</title>

    <link rel="preload" href="main.js" as="script">

  </head>

  <body>
    <h1>What ever</h1>
    

    <script src="main.js"></script>
  </body>
</html>

Resource Type

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 header -->
<link href="style.css" rel="preload" as="style">

<!-- Where you want to use the stylesheet (it can be at the bottom of the body) -->
<link href="style.css" rel="stylesheet" >

Documentation / Reference


Powered by ComboStrap