The critical request chain represents the order of resources that are prioritized and fetched by the browser. Lighthouse identifies assets that are on the third level of this chain as late-discovered. You can use the
audit to identify which resources to preload. Preload key requests
You can preload resources by adding a
<link> tag with
rel="preload" to the head of your HTML document:
<link rel = "preload " as = "script " href = "critical.js " >
The browser caches preloaded resources so they are available immediately when needed. (It doesn't execute the scripts or apply the stylesheets.)
Resource hints, for example,
, are executed as the browser sees fit. The
preload, on the other hand, is mandatory for the browser. Modern browsers are already pretty good at prioritizing resources, that's why it's important to use
preload sparingly and only preload the most critical resources.
Unused preloads trigger a Console warning in Chrome, approximately 3 seconds after the
Preloading resources defined in CSS
Fonts defined with
rules or background images defined in CSS files aren't discovered until the browser downloads and parses those CSS files. Preloading these resources ensures they are fetched before the CSS files have downloaded.
Preloading CSS files
If you are using the
critical CSS approach, you split your CSS into two parts. The critical CSS required for rendering the above-the-fold content is inlined in the
<link rel="preload"> to initiate the download sooner.
Because browsers don't execute preloaded files, preloading is useful to separate fetching from
The simplest way to implement
preload is to add a
<link> tag to the
<head> of the document:
<head > <link rel = "preload " as = "script " href = "critical.js " > </head >
as attribute helps the browser set the priority of the prefetched resource according to its type, set the right headers, and determine whether the resource already exists in the cache. Accepted values for this attribute include:
as attribute, or having an invalid value is equivalent to an
XHR request, where the browser doesn't know what it is fetching so it can't determine the correct priority. It can also cause some resources, such as scripts, to be fetched twice.
Some types of resources, such as fonts, are loaded in
anonymous mode. For those you must set the
crossorigin attribute with
<link rel = "preload " href = "ComicSans.woff2 " as = "font " type = "font/woff2 " crossorigin >
Fonts preloaded without the
crossorigin attribute will be fetched twice!
<link> elements also accept a
, which contains the
MIME type of the linked resource. The browsers use the value of the
type attribute to make sure that resources get preloaded only if their file type is supported. If a browser doesn't support the specified resource type, it will ignore the
You can also preload any type of resource via the
Link HTTP header
Link: </css/style.css>; rel="preload"; as="style"
A benefit of specifying
preload in the HTTP Header is that the browser doesn't need to parse the document to discover it, which can offer small improvements in some cases.
If you are using a module bundler that creates build files of your application, you need to check if it supports the injection of preload tags. With
webpack version 4.6.0 or later, preloading is supported through the use of magic comments inside
import (__ "CriticalChunk" )
If you are using an older version of webpack, use a third-party plugin such as
To improve page speed, preload important resources that are discovered late by the browser. Preloading everything would be counterproductive so use
preload sparingly and
measure the impact in the real-world.
Sep 17, 2019