クリティカルレンダリングパスについて
クリティカルレンダリングパスとは、Webページがロードを開始して、最初にレンダリングが行われるまでの処理の流れのこと。
具体的には下記。
- HTMLドキュメントのロードと評価
- サブリソースのロードと評価
- レンダリングツリーの構築と描画
上記の処理はいずれも前の工程が完了しないと次の工程を始められないクリティカルな処理である。
ちなみにこのクリティカルレンダリングパスに関連して、ファーストビュー（Abobe the fold）の表示に必要なCSSをクリティカルCSSと呼ばれることがあり、ファーストビュー以外のCSSを非同期で読み込むことによって、レンダリングを早めるといったテクニックが使用されることがある。
HTMLドキュメントのロードと評価
ブラウザがHTMLドキュメントを取得し、パース・評価を行う。
この際に、DOMやCSSOM（CSS Object Model）の構築が行われるとともに、画像やCSS、JSなどのサブリソースのHTTPリクエストを繰り返す。
この時点ではDOMやCSSOMが構築中のため、レンダリングは開始されない。
サブリソースのロードと評価
サブリソースの中でもCSSとJSはDOM・CSSOMに影響を与えるため、レンダリングをブロックする。
この間、ブラウザはレンダリングツリーの構築の前にCSSやJSの処理を順番に完了させることに専念してしまうため、DOMとCSSOMの構築が完了されるまではレンダリングが開始されない。
レンダリングツリーの構築と描画
DOMやCSSOMが構築されると、それら2つを組み合わせてレンダリングツリーが構築される。
レンダリングツリーには、レンダリング対象の要素がどのような位置関係で配置され、どのような見た目であるかなどの情報が含まれている。
これをもとにして、画面上の要素位置の計算（レイアウトの計算）し、画面上にピクセルを配置する描画処理が行われる（ペインティング）。
ペインティングには2つのステップがあり、まずは要素の重なり順を考慮した「Paint Records」という手順書を作成する。
この順番はStacking Context（重ね合わせコンテキスト – ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化で HTML 要素は、要素の属性に基づいてこの空間を優先度つきの順序で占有する）と同じになる。
このあと、Compositeという画面上のピクセルに変換する処理（ラスタライズ）が行われる。
具体的には、ページをいくつかのレイヤーに分けてピクセルを塗りつぶし、最終的に一つにまとめる「Compositing」と呼ばれる手法を用いる。
これを用いることで、スクロールのたびに際レンダリングする必要がなく、また再レンダリングの際にも、変更があったレイヤーのみ再計算すれば済むので、計算量を大幅に削減することができる。
レンダリングツリーの構築以後は開発者が改善できる点はほとんどなく、これ以前のHTMLやサブリソースのロードと評価を最適化して、レンダリングツリーの構築をいかに早められるかが、ページ表示速度改善の主題である。
ネットワーク処理における構成要素
リソースを取得するためのHTTPリクエストは、Webページのロードでもっとお大きな時間を費やす。
HTTPリクエストにおいて、ネットワーク処理の速度に影響を与える要素は下記。
- DNSの名前解決（DNSルックアップ）
- TCP接続の確立（3ウェイハンドシェイク）
- HTTPS接続時の暗号化セッションの確立（TSLハンドシェイク）
この際に、Webサーバー側では、TCPやTSLの設定最適化を行ったり、HTTP Keep-Aliveの設定を行うなどして3ウェイハンドシェイクのコストの削減が可能。
またネットワーク選定の初期段階においては、物理的にクライアントに近い距離で配信できるよう、Webサーバー選定も考慮する必要がある。