What are the asynchronous Media Resource Fetch attribute ?



This page list all the fetch method that can be applied to web page resources (media resources) such as:

  • stylesheet
  • scripts,
  • Web Fonts,
  • images



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 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


Lazy Load


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.

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


Discover More
Browser - Render blocking resources

All resources that are before the DomContentLoaded event are blocking the construction of the DOM. They are therefore known as render blocking resources They all have a render...
Html Script Async Vs Defer
HTML - Defer attribute

defer is an boolean attribute of script element that indicates to the user agent (browser) that it should execute the script: after the DOM has been created (the HTML document read entirely and has...
How to preload HTML resource (Javascript, StyleSheet)

This article shows you how to preload HTML resources to use them at a later time.
Media resources are images, JavaScript, CSS, or fonts

Media resources are resources that are embedded into an page. They are from the following type: images, Script (JavaScript), CSS stylesheets, fonts iframes, videos. audio Or external...
Html Script Async Vs Defer
What is the difference between the Async and Defer Script attribute ?

The script HTML element has two asynchronous loading method that may be chosen via the presence of the async or defer attribute. Asyncdeferresource fetch instructions In a page load, the following...
What is the script HTML element?

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...

Share this page:
Follow us:
Task Runner