Webサイトの表示速度を低下させるレンダリングブロックとは何か？

よこのじ（@yokonoji_work）です。

Webサイトの表示速度を確認できるサービス5選で紹介したPageSpeed Insightsでは、表示速度を向上させるためにレンダリングブロックしているCSS／JavaScriptへの対処が提案されます。これに対応するためにはレンダリングブロックを理解する必要がありますので、ページの読み込み処理についてまとめておきます。

まず、用語の意味を知る

ページの読み込み・表示がどのような仕組みで行われているのか知るために、関連用語の整理をしておきます。

DOM、CSSOMとは？

DOM（Document Object Model）とは、HTMLコードの記述内容をブラウザが解析した結果です。

解析結果であるDOMは「divタグの中にpタグとaタグという要素があり、その属性は○○で、△△というテキストが記述されている」というような情報を持っています。

また、CSSOM（CSS Object Model）というCSSの記述内容を解析した情報も構築されます。

レンダリングとは？

レンダリングとは、ブラウザにページを表示していくことです。

ページの読み込みが始まると、ブラウザはhtml・cssをパース（解析）してDOMツリーとCSSOMツリーを構築します。そして、それらを組み合わせて構築したレンダーツリーの情報を元にページを表示します。

DOM・CSSOMの構築から描画、表示の一連の工程がレンダリングとなります。

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

レンダリングブロックとは、レンダリングが一時中断されることです。これにより、表示が遅れることになります。

レンダリングとは表示までの一連の工程のことでしたが、何が中断されるのか？

これは、DOM構築のときのパースになります。外部ファイルとしてCSS／JavaScriptを読み込んだ場合は、読み込み中にパースがブロックされます。

こちらの記事で面白い実験が行われています。
「レンダリングブロックとは何なのか 実際にやってみた」

• CSS／JavaScriptなしのページ － レンダリングブロックされない
• headタグ内に直接cssを埋め込む － レンダリングブロックされない
• headタグ内で外部cssを指定する － レンダリングブロックされる
• headタグ内に直接JavaScript処理を埋め込む － レンダリングブロックされない
  （読み込みによるブロックはないが、処理中はブロックされる）
• headタグ内で外部jsファイルを指定する － レンダリングブロックされる
• imgタグ内で画像を表示 － レンダリングブロックされない
• cssのbackground-imageで画像を表示 － レンダリングブロックされない

外部ファイルとしてCSS／JavaScriptを読み込む場合、ブラウザはHTMLコードのパースを中断してCSS／JavaScriptのダウンロード処理に移りますので、ダウンロードにかかった時間（パースが中断された時間）だけレンダリングが遅れるということになります。

こちらはscriptタグで外部のjsファイルを読み込んだときの例です。scriptタグに属性の指定がない場合はダウンロード中はパースが中断しているのがわかります。

そのため、ミニファイ（minify）というデータサイズを小さくしてダウンロードを速くする方法は一般的な改善方法となっています。また、上の図にあるようにdeferやasync属性を付けることでパースの中断をなくす非同期での読み込みが可能となります。これはページ表示の高速化の手法のひとつです。

その他、読み込みタイミングをコントロールして表示を速くすることもできます。

• <script>タグは</body>の直前に書いて、レンダリングされた後で処理を実行する
• ファーストビュー関連のcssのみheadタグ内で読み込んで、その他のcssは後で読み込む

レンダリングブロックが発生するとユーザーは表示が完了するのを待たされることになります。表示が遅いと直帰率が高まり見てもらいたいコンテンツを届けられなくなりますので、快適に閲覧してもらえるWebサイトを作っていきたいですね。

[toggle title=”参考サイト”]

[/toggle]