Ilya Grigorik
クリティカル レンダリング パスの最適化とは、現在のユーザー操作に関連するコンテンツの表示を優先することです。
高速なウェブ エクスペリエンスを提供するには、ブラウザで多くの処理を行う必要があります。こうした作業のほとんどは、ウェブ デベロッパーには見えません。Google がマークアップを記述すると、見栄えのよいページが画面に表示されます。しかし、ブラウザはどのようにして HTML、CSS、JavaScript を取り込み、画面上のピクセルをレンダリングするのでしょうか。
パフォーマンスを最適化するには、HTML、CSS、JavaScript のバイトを受け取るまでの中間ステップと、それらをレンダリングされたピクセルに変換するために必要な処理（クリティカル レンダリング パス）で何が起きるかを理解することが重要です。
クリティカル レンダリング パスを最適化することで、ページの初回レンダリング時間を大幅に短縮できます。さらに、クリティカル レンダリング パスを理解することは、パフォーマンスに優れたインタラクティブ アプリケーションを構築するための基盤にもなります。インタラクティブな更新プロセスも同じです。連続ループで実行されます。1 秒あたり 60 フレームが理想的です。まずは、ブラウザが単純なページを表示する仕組みについて大まかに説明しておきます。
参考情報
- オブジェクト モデルの構築
- レンダリング ツリーの構築、レイアウト、ペイント
- レンダリング ブロック CSS
- JavaScript によるインタラクティビティの追加
- クリティカル レンダリング パスの測定
- クリティカル レンダリング パスのパフォーマンスの分析
- クリティカル レンダリング パスの最適化
- PageSpeed のルールと推奨事項