blocking="render"
blocking="render" 属性は <link>、<script>、<style> 要素に指定し、そのリソースの読み込みが完了するまでページのレンダリングをブロックします。
概要
blocking="render" 属性は <link>、<script>、<style> 要素に指定し、そのリソースの読み込みが完了するまでページのレンダリングをブロックします。
対応ブラウザ
デスクトップ
Chrome 105+
Edge 105+
Safari 18.2+
Firefox 未対応
モバイル
Chrome Android 105+
Safari iOS 18.2+
Firefox Android 未対応
基本構文
HTML
<link rel="stylesheet" href="critical.css" blocking="render">
<script src="init.js" blocking="render"></script>実務での使いどころ
-
blocking="render" の活用
blocking=render属性。リソースの読み込み完了までレンダリングをブロック。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。