What are the asynchronous Media Resource Fetch attribute ?

Default

Without fetch instructions (hint), the loading of this resources blocks the page load (ie block the document’s load event)

The browser:

• stop the page load
• download the resource
• execute them if this is a executable resource such as a stylesheet, script, iframe, …
• resume the page load

That's why they are also known as render blocking resources

Prefetch

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:

• Download and cache the resource in the background with a low priority
• does not execute it (Scripts aren’t executed, stylesheets aren’t applied)

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:

• Firefox X-moz: prefetch
• Safari: X-Purpose: preview

Ref:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
• wiki/Link_prefetching

Lazy Load

Lazy-load

Example: Images

<img src="image.jpg" lazyload>

Preload

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.

Async / defer

From the script element

• async=false or true to execute script in parallel (ie the user agent can continue parsing and rendering and run the script as soon as possible.
• defer - defer=false or true indicates no document creation (ie no “document.write” in javascript) - the user agent can continue parsing and rendering and executes the script after

¹⁾