blocking="render" | Frontend Practical Guide

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`blocking`	105	105		18.2	105	18.2
HTML attribute
`blocking`	105	105		18.2	105	18.2
`blocking`	105	105		18.2	105	18.2
`blocking`	105	105		18.2	105	18.2
DOM API
`blocking` The read-only blocking property of the HTMLScriptElement returns a live DOMTokenList object containing the operations that should be blocked on the fetching of an external resource. It reflects the script element's blocking content attribute.	105	105		18.2	105	18.2
`blocking` The read-only blocking property of the HTMLStyleElement returns a live DOMTokenList object containing the operations that should be blocked on the fetching of an external resource. It reflects the style element's blocking content attribute.	105	105		18.2	105	18.2

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

HTML

<link rel="stylesheet" href="critical.css" blocking="render">
<script src="init.js" blocking="render"></script>

The path from discovery in the head to first paint, and where blocking is decided.

List resources that truly affect first render and may justify blocking behavior.

Blocking more than necessary can delay paint and worsen perceived performance.

Control document behavior

Use blocking="render" to influence loading, metadata, or script behavior at the document level.
Tune performance strategy

Apply blocking="render" when earlier resource hints or document settings improve startup or runtime behavior.

Test blocking="render" in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.