レンダリングブロックとは何か？回避する解決策

レンダリングブロックとは何か？

普段何気なく閲覧しているWebページですが、ページを表示するまでにブラウザは、

• リクエスト（Request）
• データロード（Download）
• 画面描画（Painting）
• スクリプト実行（Scripting）

と様々なことをしています。

このうち、画面描画に関連する処理が重いことで画面描画が遅延してしまうことをレンダリングブロックと呼びます。

レンダリングブロックを誘発するもの

WebページはHTMLドキュメントなので、単純なHTMLドキュメントだけなら現在の端末ならページは一瞬で表示されます。レンダリングブロックを誘発するのは、

• 深すぎるDOM構造
• 幅高さなどが規定されていない要素
• レンダリング指定が外部ファイルの読み込み後に指定されていること

が主な要因です。

レンダリングブロックを回避する方法

DOM構造はなるべくシンプルに

Webページに求められる表現力が高まっていることから、WebページのDOM構造が複雑で階層が深くなっていく傾向にあります。DOM構造が深すぎると、ブラウザがレンダリングする際に処理する時間がかかるため、なるべくシンプルなDOM構造にしておくのがベストです。

CSSやJavascriptを含まないシンプルなHTMLであればDOM構造が深くてもブラウザはすぐにレンダリングしてくれますが、CSSやJavascriptが関連しない場合はDOM構造を深くする理由はないので、「DOM構造が深い = CSS/Javascriptの処理が多い」というケースがほとんどです。

とはいえ、レイアウトの自由度もUX/UIを考えれば非常に重要ですので、レンダリングスピードとのバランスを考えるようにしましょう。

幅高さなどが規定されていない要素をなくす

ブラウザは、画像やiframeなど幅や高さがある要素をレンダリングする際には、情報がないとレンダリングができません。例えば、画像だったらwidthやheightがimgタグに記述されていない場合は、画像ファイルからサイズを取ってくるまでレンダリングができません。

画像サイズがわからなくても、画像のサイズが大枠のレイアウトへの影響が少ない場合は一旦画像以外のHTMLドキュメントをレンダリングしますが、それでも画像部分にレンダリングの遅延が発生すると、画像を読んでからレンダリングするためカクつくことになります。

昔から言われている「img要素にはwidthとheightを必ず設定しなくてはならない」というのもここに原因があります。

幅高さが決まっている画像などはしっかりとwidthとheightを固定値で指定することでレンダリングブロックを防げます。

外部ファイルの読み込み

レンダリングブロック対策というと一番にあげられるのが外部ファイルです。

CSSやJavascriptは外部ファイルに記述することが一般的になっていますが、外部ファイルにしてされていると、ブラウザはどうやってレンダリングすれば良いかがわからないため、外部ファイルのCSSやJavascriptを読み込むまでレンダリングをストップします。

HTTP/2.0に対応しているブラウザであれば、平行ダウンロードが可能なのでかつてほど遅延は起こりませんが、それでもHTMLとCSS/Javascriptではファイルサイズが違うため「HTMLドキュメントと完全に同時にダウンロードが完了する」ことはなく、タイムラグはどうしても生じます。

そのため、最近では「大枠のレイアウトを規定するCSSやJavascriptはHTMLのHEADに直書きする」という手法が採用されるようになりました。こうすることで、ユーザーが「ページが表示された」と認識できる最低限のページ要素（サイトロゴやページヘッダなど）を高速表示させて、その後に残り部分をレンダリングできます。

Googleのトップページを見ても、CSSと最低限のJavascriptはHTMLのHEAD要素に書かれていて、追加処理を別のJavascriptで読み込んでいることがわかります。

HTMLドキュメントのサイズが若干増えてしまいますが、それでも10KBほどですので、高速通信が当たり前になった現在では問題になるサイズではありません。

---

レンダリングブロックとは何か、レンダリングブロックを回避する方法を見てきました。

ページに訪問したユーザーにコンテンツを出来るだけ速く提供することは現在では必須の条件とも言われているので、しっかりと対応するようにしましょう。