Preload Critical Resources To Improve Loading Speed
Speed is critical when we think of web performance and that means on first page load on your web app, a user expects to see “something” asap; and not just something but meaningful content.
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
Preload resources by adding a tag with
rel="preload" to the head of your HTML document.
<link rel="preload" href="app.main.css" as="style">
Use "as" to specify the type of content to be preloaded. It allows the browser to:
- Prioritize resource loading more accurately.
- Match future requests, reusing the same resource if appropriate.
- Apply the correct content security policy to the resource.
- Set the correct Accept request headers for it.
Prefetch is intended for prefetching resources that will be used in the next navigation/page load (e.g. when you go to the next page) but at a lower priority than other important assets needed for the current page.
You to the browser : “This is fine, but isn’t useful for the current page!”
In addition, browsers will give prefetch resources a lower priority than preload ones — the current page is more important than the next one.
<link rel="prefetch" href="for-next-page.js" as="script">
Learn more about preloading content on this pwafire.org devdoc and in depth at mozilla dev docs here