This page list all the fetch method that can be applied to web page resources (media resources) such as:
Without fetch instructions (hint), the loading of this resources blocks the page load (ie block the document’s load event)
The browser:
That's why they are also known as render blocking resources
Prefetch serves a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations.
Prefetch resources might be needed. They are likely to be used for future navigations across multiple navigation boundaries.
The browser:
If the resource can be cached (e.g there’s a valid cache-control with valid max-age), Prefetch resources are stored in the browser HTTP cache. otherwise they are stored in the browser memory cache (session)
Syntax: link tags with a relation type of next or prefetch are prefetched.
<link rel="prefetch" href="foo.js">
header sends along with a prefetch request by the browser:
Ref:
Example: Images
<img src="image.jpg" lazyload>
Preload is an early fetch instruction to the browser to request a resource needed for a page (key scripts, Web Fonts, hero images).
preload is a declarative fetch that tells the browser to download and cache the resource without blocking the document’s onload event.
Preload resources have a high-confidence that they will be used in the current page.
Unlike async and defer, preload doesn’t instruct web browsers to apply / execute the resources to the webpages.
If the resource can be cached (e.g there’s a valid cache-control with valid max-age), Preload resources are stored in the browser HTTP cache, otherwise they are stored in the browser memory cache (session)
<link rel="preload" href="foo.js" as="script">
Note that preload as=“style” get a highest priority while as=”script” will get a low or medium priority.
From the script element