テクニカル
レンダリングブロッキング
ページ描画を妨げるCSS/JS。読み込み完了まで表示が止まり、表示速度を悪化させる。
レンダリングブロッキングとは？
レンダリングブロッキングとは、ブラウザがページを描画する前に処理を完了させなければならないCSSやJavaScriptのことです。
これらが重いと、その間ページが真っ白なまま表示が止まります。
<head>内の大きなCSSや、同期読み込みのJSが代表例です。
FCPやLCPを悪化させる主要因で、表示速度改善の最重要ターゲットの1つです。
レンダリングブロッキングの使い方・実践方法
レンダリングブロッキングを解消する施策は次のとおりです。
レンダリングブロッキングで押さえるべきポイント
Lighthouseは「レンダリングを妨げるリソースの除外」として該当ファイルを名指ししてくれます。
まずはこのリストの上位から、deferやクリティカルCSS化で順に潰すのが効率的な進め方です。
レンダリングブロッキングを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。
「レンダリングブロッキング」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円 ／ 自サイトをSEO診断
レンダリングブロッキングについてよくある質問
asyncとdeferの違いは？
asyncは読み込み完了次第すぐ実行、deferはHTML解析完了後に順番通り実行します。
多くの場合deferが安全です。
多くの場合deferが安全です。
CSSもブロッキングになる？
はい。
CSSは原則レンダリングをブロックします。
クリティカルCSSのインライン化が有効です。
CSSは原則レンダリングをブロックします。
クリティカルCSSのインライン化が有効です。
どこで該当ファイルがわかる？
Lighthouseの「レンダリングを妨げるリソースの除外」項目で具体的に列挙されます。