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
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:
as attribute allows the web developer to have greater control of resource prioritization, amongst other things.
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.
preload, will show examples of how to
preload web pages, and more.
Benefits of the
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
- 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
How does preloading work?
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.
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.
The first example demonstrates a simple use case for preloading style sheet. This can be achieved either by using a
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">
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
crossoriginattribute, must also include a
crossoriginattribute, 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.
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);
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
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.