Allows putting 'blocking=render' as an attribute and value to a <script> or preload/stylesheet <link> to make it explicitly render-blocking. It can be used on, for example, critical web fonts, script-inserted scripts and style sheets, async scripts and etc, to ensure that rendering do not start prematurely while critical resources are not ready. The major goal is to reduce flash of unstyled content and layout shifting.

Motivation

All current browsers already have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated. This prevents a Flash of Unstyled Contents (FOUC) and ensures critical scripts (like framework code) are executed, so that the page is usable after the first rendering cycle. This feature extends the mechanism with a new 'blocking' attribute to allow developers to explicitly mark resources render-blocking, and therefore support more use cases (see explainer).

Specification

Specification link


Proposal in a personal repository, no adoption from community

Status in Chromium

Blink>HTML


No active development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signals

Owner

Search tags

render, blocking,

Last updated on 2021-11-17