← Back to release summary

'blocking=rendering' attribute on scripts and style sheets

Category
Performance
Type
New or changed feature
Status
Enabled by default (Chrome 105)
Intent stage
Shipped

Summary

Allows putting 'blocking=render' as an attribute and value to a <script>, <style> or stylesheet <link> to make it explicitly render-blocking. The main usage is to avoid a flash of unstyled content or user interactions with an unmature page caused by, e.g., script-inserted scripts/stylesheets, client-side A/B testing and etc.

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

Standards & signals

Explainers: https://gist.github.com/xiaochengh/9404abbecdc3b45c0e9f3d5e99fbc65d#file-proposal-v3-md

View on chromestatus.com