クリティカル レンダリング パスの最適化とは、現在のユーザー アクションに関連するコンテンツの表示の優先順位付けを意味します。
高速なウェブ エクスペリエンスを提供するには、ブラウザで多くの処理を行う必要があります。この作業のほとんどは、ウェブ デベロッパーである私たちにはわからないものです。私たちがマークアップを記述すると、見栄えの良いページが画面に表示されます。しかし、ブラウザはどのようにして HTML、CSS、JavaScript を取り込み、画面上のピクセルをレンダリングするのでしょうか。
パフォーマンスを最適化するには、HTML、CSS、JavaScript のバイトを受け取るまでの中間ステップと、それらをレンダリングされたピクセルに変換するために必要な処理、すなわちクリティカル レンダリング パスで行われる処理を把握することが重要です。
クリティカル レンダリング パスを最適化することで、ページの最初のレンダリングまでの時間を大幅に短縮できます。さらに、クリティカル レンダリング パスを把握することは、パフォーマンスに優れたインタラクティブ アプリケーションを構築するための基盤にもなります。インタラクティブな更新のプロセスは同じで、連続ループで行われます。処理速度は 60 フレーム/秒が理想的です。まずは、ブラウザで簡単なページを表示する方法について概説します。
クリティカル レンダリング パス
モバイルおよびパソコンのブラウザでのページがレンダリングされる仕組みを詳しく知り、ウェブサイトの速度を最適化する方法を説明します。 クリティカル レンダリング パス、つまりブラウザが HTML、CSS、JavaScript を生き生きとしたウェブサイトに変換するために必要な一連のステップについて学びます。そこから、パフォーマンスを測定するツールと、最初のピクセルをできるだけ早い段階で画面に表示するためのシンプルな戦略を検討して実験していきます。PageSpeed Insights や Google Chrome のデベロッパー ツールのタイムライン ビューでの最適化案を参考にして、すぐにパフォーマンスを向上するために必要なデータを見つける方法を学びます。
これは Udacity から提供される無料コースです。
参考情報
- オブジェクト モデルの構築
- レンダリング ツリーの構築、レイアウト、ペイント
- レンダリング ブロック CSS
- JavaScript でインタラクティビティを追加する
- クリティカル レンダリング パスの測定
- クリティカル レンダリング パス パフォーマンスの分析
- クリティカル レンダリング パスの最適化
- PageSpeed のルールと推奨事項