blocking="render" | Frontend Practical Guide

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`api.HTMLLinkElement.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>

Summarize the idea behind explicitly marking render-blocking resources.

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.