Preload Critical Assets

Improve the performance of your web pages by preloading and prefetching resources that are critical on first page load

05/06/2021

PWA, Perf, Preload, Prefetch

Introduction

Improve the performance of your web pages by preloading and prefetching resources that are critical on first page load.

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 <link> tag with rel="preload" to the head of your HTML documen​t as shown in the code snippet below. The as attribute is used to identify which type of resource is being fetched, and as="style" is used to preload stylesheet files.

<link rel="preload" href="main.app.css" as="style" />

As stated earlier, use ​​as to specify the type of content to be preloaded. It's important such that 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.

Types of content that can be preloaded

The following types can be preloaded and as in the example given, learn more here

audio, embed, document, fetch, font, image, object, script, style, video, track and worker

Including a MIME type

The browser will use the type attribute value to work out whether it supports that resource, and will only start downloading it if this is the case, ignoring it if not.

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />

Browsers that support MP4s will preload and use the MP4, making the video player hopefully smoother/more responsive for users. Browsers that don't support the MP4 can still load the WebM version, but don't get the advantages of preloading.

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.

<link rel="prefetch" href="for-next-page.js" as="script" />

Cross-origin fetches

Cross-Origin Resource Sharing is​​ a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

Learn more on mdn docs here

Author : Maye Edwin