Improve the performance of your web pages by preloading and prefetching resources that are critical on first page load.
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 document 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.
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
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.
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 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, check example here.
- Use preload for resources that are discovered late but are critical to the current page.
- Use prefetch for resources that are needed for a future navigation route or user action.
If you would like more information about specific aspects of how preloading and prefetching can affect your web page, refer to these articles: