TherenderBlockingStatus read-only property returns the render-blocking status of the resource.

It is useful to determine resources that:

• weren't render-blocking and therefore could be delayed, or
• were render-blocking and therefore could be preloaded.

Description

Render-blocking resources are static files, such as fonts, CSS, and JavaScript that block or delay the browser from rendering page content to the screen. The browser determines these blocking resources automatically and doesn't render any pixel to the screen before all stylesheets and synchronous scripts are loaded and evaluated. This prevents Flash of Unstyled Contents ("FOUC").

In addition to the automatic render-blocking mechanism,blocking="render" can be provided as an attribute and value to<script>,<style> or<link> elements to specify explicit render-blocking. For example:

<script blocking="render" src="important.js" defer></script>

Value

TherenderBlockingStatus property can have the following values:

"blocking"

The resource might potentially block rendering.

"non-blocking"

The resource does not block rendering.

Examples

Logging resources that block rendering

TherenderBlockingStatus property can be used to see resources that block rendering.

Example using aPerformanceObserver, which notifies of newresource performance entries as they are recorded in the browser's performance timeline. Use thebuffered option to access entries from before the observer creation.

const observer = new PerformanceObserver((list) => {  list.getEntries().forEach((entry) => {    if (entry.renderBlockingStatus === "blocking") {      console.log(`${entry.name} is render-blocking.`);    }  });});observer.observe({ type: "resource", buffered: true });

Example usingPerformance.getEntriesByType(), which only showsresource performance entries present in the browser's performance timeline at the time you call this method:

const resources = performance.getEntriesByType("resource");resources.forEach((entry) => {  if (entry.renderBlockingStatus === "blocking") {    console.log(`${entry.name} is render-blocking.`);  }});

Specifications

Browser compatibility