Preload Critical Resources To Improve Loading Speed (Javascript & CSS)
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.onloadevent.
Preload resources by adding a <link> tag with rel="preload" to the head of your HTML document.
<link rel="preload" href="main.app.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.
2. What types of content can be preloaded?
Includes;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.
<head>
<meta charset="utf-8">
<title>Video preload example</title>
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
</head>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.
3. 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.
A good case is that; this applies even if the fetch is not cross-origin in font files. Because of various reasons, these have to be fetched using anonymous mode CORS
<head>
<meta charset="utf-8">
<title>Web font example</title>
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
</head>4. 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
Cheers!
