クリティカルレンダリングパスについて
クリティカルレンダリングパスとは、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つを組み合わせてレンダリングツリーが構築される。
レンダリングツリーには、レンダリング対象の要素がどのような位置関係では１され、どのような見た目であるかなどの情報が含まれている。
これをもとにして、画面上の要素位置の計算し、画面上にピクセルを配置する描画処理が行われる（レンダリング）。
レンダリングツリーの構築以後は開発者が改善できる点はほとんどなく、これ以前のHTMLやサブリソースのロードと評価を最適化して、レンダリングツリーの構築をいかに早められるかが、ページ表示速度改善の主題である。
ネットワーク処理における構成要素
リソースを取得するためのHTTPリクエストは、Webページのロードでもっとお大きな時間を費やす。
HTTPリクエストにおいて、ネットワーク処理の速度に影響を与える要素は下記。
- DNSの名前解決
- TCP接続の確立（3ウェイハンドシェイク）
- HTTPS接続時の暗号化セッションの確立（TSLハンドシェイク）
この際に、Webサーバー側では、TCPやTSLの設定最適化を行ったり、HTTP Keep-Aliveの設定を行うなどして3ウェイハンドシェイクのコストの削減が可能。
またネットワーク選定の初期段階においては、物理的にクライアントに近い距離で配信できるよう、Webサーバー選定も考慮する必要がある。