What is rel="Preload"?

Asked

Viewed 5,911 times

4

I saw in a code snippet of a site a definition more or less like this:

<link rel="preload" href="caminho/para/o/script.js" as="script">

I’ve never seen that code before.

I wonder what that means rel="preload"? Is some HTML5 specification?

html5 tags

2 answers

6


Of documentation

The value of preload in the attribute rel= of the element <link> allows you to write declarative search requests on your <head>, specifying features that your pages will need very soon after loading, which you want to start preloading at the beginning of the lifecycle of a page load, before the main rendering machine of the browser goes into operation.

This ensures that they are available before and are less likely to block the first page rendering, leading to improvements in performance.

You would normally wear something like this:

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

Here however, we will use a rel value of preload, that transforms the <link> element in a pre-loader for virtually any resource we desire:

<head>
  <meta charset="utf-8">
  <title>JS 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>bouncing balls</h1>
  <canvas></canvas>

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

Here we are preloading our CSS and Javascript files so that they are available as soon as they are needed while rendering the page later. This example is a bit trivial, but the benefits can be seen more clearly, later in rendering the features are discovered and larger are.

Features pointed into a CSS file, such as fonts or images, or larger images and even video files can have benefits also if added with the attribute preload, and the following possible benefits:

  • Prioritize resource loading more accurately.
  • Combine future requests by reusing the same resource, if appropriate.
  • Apply the right content security policy to the resource.
  • Set the request headers (header) for Accept right for him.

What types of content can be preloaded with link rel="preload"?

With the attribute as="..." you can define the following types of documents.

  • as="audio": audio file
  • as="video": video file.
  • as="document": HTML document intended to be embedded within a <frame> or <iframe>.
  • as="fetch": resource to be accessed by a search request or XmlHttpRequest (or fetch), as a file ArrayBuffer or JSON.
  • as="font": source file.
  • as="image": image file.
  • as="script": javascript file.
  • as="style": style files.
  • as="track": webvtt file.
  • as="worker": a Javascript web worker or shared worker.
  • as="embed" and as="object": resource to be incorporated within an element <embed> or <object>.

Extra

If you pre-load some resource like for example:

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

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

but not using it probably the browser console will send a message similar to this:

The resource http://site/preload.css was preloaded using link
preload but not used within a few seconds from the window's
load event. Please make sure it wasn't preloaded for nothing.

Note that using the <link rel="preload" href="style.css" as="style"> will only pre-load the CSS and prioritize (as you set the priority), it will not style the document for you, it is still necessary to call the:

<link rel="stylesheet" href="style.css">

  • William had a doubt. In the W3C Documentation it says the following: "If the Preload keyword is used as an Optimization to initiate fetch earlier then no Additional Feature Detection checks are necessary: browsers that support Preload will initiate fetch earlier, and those that do not will ignore it and fetch the Resource as Previously. Otherwise, if the application intends to rely on Preload to fetch the Resource, then it can execute a Feature Detection check to Verify that it is supported."

  • From what I understand you don’t need to have 2 <link> pro same CSS or else will be two Requests. Only <link rel="preload" href="style.css" as="style"> would be enough, because the browser that does not recognize Preload will load the CSS normally, even with rel="Preload" on the... https://w3c.github.io/preload/#dfn-Preload-keyword

  • @hugocsl I think you misunderstood the English text, the message seems to talk about supporting browsers on Preload, not about adding a link[rel=stylesheet] and a link[rel=Preload] would be a redundancy. So much so that I did a test, I created a web page with rel=Preload for a css with this h1 { font-size: 48pt } and nothing happened.

  • @hugocsl edited the answer, see the explanation

  • Nice William was worth the explanation! I thought repeating the link to the same file would make the browser make two requests, but it seems that’s not it

  • @hugocsl it does the HTTP request to the server, it just doesn’t process/render. One thing is the download, another thing is the browser rendering engine, are two separate things that communicate or not, so much so that an HTML/CSS rendering engine can be used to load local files or even implement other structures outside the web.

  • I have to read more about "How Browsers Work" rss, []s

  • 1

    @hugocsl an initial tip, the rendering engine of each browser: Firefox is Gecko, Chrome and Opera are Blink, IE = Trident, Msedge is Edgehtml, Safari, Android Browser use Webkit. Formerly the Opera (until the 12) was the Presto.... and so on, take advantage and read: https://answall.com/a/187977/3635

Show 3 more comments

3

To begin we need to understand what is the rel, it allows you to specify and preload features that your page will need before the main browser rendering, it is commonly used for files CSS

<link rel="stylesheet" href="estilo.css">

Using the rel="preload" you can specify any resource to be pre-loaded, such as a JS

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

You can still use the as to specify the type of resource that will be loaded.

The main advantages of this preloading is that these features will be available before page rendering.

Browser other questions tagged html5 tags

You are not signed in. Login or sign up in order to post.