What is preload in html and why is good for?

  HTML & CSS, Javascript

The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>.

specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle.

most commonly use <link> to load a CSS file to style your page with:

<link rel="stylesheet" href="css/main.css">

Here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want:

  1. The path to the resource in the href attribute.
  2. The type of resource in the as attribute.
<html>
<head>
<meta charset="utf-8">
<title>JavaScript and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Example</h1>
<canvas></canvas>


<script src="main.js" defer></script>

</body>
</html>

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on.

  1. Resources that are pointed to from inside CSS, like fonts or images.
  2. Resources that JavaScript can request, like JSON, imported scripts, or web workers.
  3. Larger images and video files.

preload has other advantages too. Using as to specify the type of content to be preloaded allows the browser to:

  1. Prioritize resource loading more accurately.
  2. Store in the cache for future requests, reusing the resource if appropriate.
  3. Apply the correct content security policy to the resource.
  4. Set the correct Accept request headers for it.

Types of preload

  1. audio: Audio file, as typically used in <audio>.
  2. font: Font file.
  3. image: Image file.
  4. script: JavaScript file.
  5. style: CSS stylesheet.
  6. video: Video file, as typically used in <video>.
  7. fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
  8. worker: A JavaScript web worker or shared worker.
  9. document: <frame> or <iframe>.

Preload Browser compatibility

BrowsersPreload
ChromeSupport
Edge ?
FirefoxNo support
Internet Explorer?
OperaSupport
Safari?
Android WebviewSupport
Chrome AndroidSupport
Edge Mobile?
Firefox AndroidNot support
Safari iOS?
Spread the Code

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of