Preload critical assets to improve loading speed
As soon as you open any web page, the browser requests an HTML document from a server, parses the contents of the HTML file, and submits separate requests for any other external references. 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.
Preload is a declarative fetch request that tells the browser to request an
important resource as soon as possible. The browser assigns a higher priority
level to the resource and tries to download it sooner while not delaying the
window.onload event. Take a look at the
Chrome Resource Priorities and Scheduling
document to learn more about how the browser prioritizes different types of
By preloading a certain resource, you are telling the browser that you would
like to fetch it sooner since it is important for the current page. Preload
resources by adding a
<link> tag with
rel="preload" to the head of your HTML
<link rel="preload" as="script" href="critical.js">
For more information about all the attributes that can be used as well as the types of content that can be preloaded, refer to Preloading content with rel="preload".
Preloading is best suited for resources typically discovered later by the
browser. For example, an external
rule in a CSS file isn't discovered until the browser finishes requesting and
parsing the CSS file. Preload this font to ensure it's fetched before the CSS
file has downloaded.
If you are using a module bundler that creates build files of your application, you will 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 a special comment parameter:
import(_/* webpackPreload: true */_ "CriticalChunk")
Prefetch is another browser hint that tells the browser a resource is important. A prefetched resource is requested at a low priority once the browser has finished requesting all the needed assets for the current page. To speed up future navigations, use prefetch to request assets that would be needed for a different route.
<link rel="prefetch" as="script" href="important-for-next-page.js">
Similarly, webpack allows you prefetch scripts if you are using version 4.6.0 or later.
import(_/* webpackPrefetch: true */_ "ImportantForNextPageChunk")
See it in action
Learn more and put this guide into action: