blocking="render"
The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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 | ||||||
| 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 |
| 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 |
Syntax
<link rel="stylesheet" href="critical.css" blocking="render">
<script src="init.js" blocking="render"></script>Live demo
Render blocking hint
Summarize the idea behind explicitly marking render-blocking resources.
Good candidates
List resources that truly affect first render and may justify blocking behavior.
Caution
Blocking more than necessary can delay paint and worsen perceived performance.
Use cases
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.
Cautions
- 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.
Accessibility
- Make sure blocking="render" supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features