March 23 2019

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.

​1. Preloading

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.

Preload resources by adding a tag with rel="preload" to the head of your HTML documen​t.

<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:

2. ​Prefetch

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


Speaking Articles Projects