What Is the Preload Directive?

preload offers more control over how particular resources are fetched for the current navigation. This directive can be defined within the <link> element's rel attribute (e.g <link rel="preload">). The preload directive also comes with the ability to define an as attribute with possible values including, but not limited to:

• script
• style
• font
• image
• document

The as attribute allows the web developer to have greater control of resource prioritization, amongst other things.

The preload directive is not to do be mistaken with a browser's preloader which is a mechanism that improves the efficiency of downloading resources in the background. Before the introduction of the browser's preloader, no additional resource processing could take place once the document encountered a render blocking resource. However, with the browser's preloader, only resources which are declared in the HTML document are preloaded. Resources would also be executed once the HTML parser got to them, giving no flexibility as to when the resource should be executed.

The preload directive overcomes these limitations and allows resources which are initiated via CSS and/or JavaScript to be preloaded as well as define when each resource should be applied. This post will go over the benefits of preload, will show examples of how to preload web pages, and more.

Benefits of the preload directive

This directive focusses on the delivery of resources within the current navigation. This is similar to what the (now deprecated) rel="subresource" directive set out to do. However, subresource was unable to define the priority of the resource, whereas preload does so with its as attribute. Benefits of using preload include:

• Allows the browser to set resource priority therefore allowing web developers to optimize the delivery of certain resources.
• Gives the browser the ability to determine the resource type therefore it can tell if the same resource can be reused in the future.
• The browser can determine if the request is compliant with the content security policy by referencing what is defined in the as attribute.

How does preloading work?

The preload directive enables a few functionalities that were otherwise not possible. One of the main benefits of preloading is the allowance of a resource to download and be fetched early, while delaying the actual execution of said resource. Although this behaviour is possible with XHR requests, a performance penalty will be incurred as it required to hide resource declarations from the user agent and the browser's preloader parser.

However, the preload directive solves the XHR request penalty issue, as it does not hide resources from the user agent or preload parser. Instead, these resources are declared at the beginning of page load and the browser knows to fetch them as soon as possible and has the option to execute them immediately or further down the page loading process.

preload web pages examples

The following section runs through a few examples of how the preload directive can be used in web page configurations.

Example 1

The first example demonstrates a simple use case for preloading style sheet. This can be achieved either by using a <link> element or via JavaScript. This is useful when a resource is being called via CSS or JavaScript, however, you would like to have it load immediately. Without the preload directive, a browser's preloader may not take these resources into account until it is late in the loading process.

<!-- Via markup -->
<link rel="preload" href="/css/mystyles.css" as="style">

<!-- Via JavaScript -->
<script>
    var res = document.createElement("link");
    res.rel = "preload";
    res.as = "style";
    res.href = "css/mystyles.css";
    document.head.appendChild(res);
</script>

Example 2

According to the preload specification, when preloading fonts there is an additional attribute which must be taken into consideration.

Preload links for CORS enabled resources, such as fonts or images with a crossorigin attribute, must also include a crossorigin attribute, in order for the resource to be properly used.

<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>

This holds true even if the fonts are loaded from your current domain.

Example 3

In order to download a particular resource that you know you'll need in the future but want to define when exactly it should be executed, the following snippets can be used. The snippet below will preload the scriptexample.js resource, which can be defined at the top of the page.

var preload = document.createElement("link");
link.href = "scriptexample.js";
link.rel = "preload";
link.as = "script";
document.head.appendChild(link);

This will therefore allow the script to download in the background. Once you have determined when you want to run the preloaded script, simply add the following snippet which will execute the JS file. When implemented correctly, this can help improve the critical path as scripts can be executed when there are no other critical resources that need to be loaded.

var script = document.createElement("script");
script.src = "scriptexample.js";
document.body.appendChild(script);

Example 4

Through the use of link tags which can be used as HTTP headers, you can define a header to perform a preload action. This can be useful when the person who is editing markup is different from the person doing optimization. The following snippet is an example of how setting an HTTP response header may look like:

Link: <https://domain.com/js/script.js>; rel=preload; as=script

Differences between preload and prefetch

Besides preload, there is another directive called prefetch which shares some faint similarities with preload. However, both differ in how and when the resource is fetch by the user agent.

Prefetching enables the browser to begin fetching (in the background) resources needed to render a particular page which the user is likely to access next. These fetched resources are then stored in the browser's local cache and delivered to the user from cache upon accessing the page in question.

The main difference between both directives is that prefetch aims to fetch resources for the next navigation which are low priority. preload however, focusses on the current navigation and fetches resources with high priority. Each method performs a different task. However, they both share the common goal of helping to improve page load speeds by methods that set out to efficiently perform additional tasks in the background.