クリティカル レンダリング パスを最適化する

最初のレンダリングをできる限り早くするには、3 つの点で最適化を行う必要があります。

  • クリティカル リソース数の最小化。
  • クリティカル バイト数の最小化。
  • クリティカル パス長の最小化。

クリティカル リソースとは、ページの最初のレンダリングをブロックする可能性のあるリソースを指します。ページ上のクリティカル リソースが少なければ少ないほど、画面上にコンテンツを表示するために必要とされるブラウザの作業量が少なくなり、CPU や他のリソースに対する競合も少なくなります。

同様に、ブラウザによるダウンロードが必要なクリティカル バイトが少なければ少ないほど、コンテンツの処理が高速になり、画面上に早く表示されることになります。バイト数を減らすには、リソースを削除するか非クリティカルにしてクリティカル リソース数を減らし、各リソースを圧縮するか最適化して転送サイズを最小限に抑えることが重要です。

最後に、クリティカル パス長は、ページが必要とするすべてのクリティカル リソースの間の依存関係と、各リソースのバイトサイズに基づく関数です。前のリソースの処理が完了するまでリソースのダウンロードが開始できないことがあり、リソースが大きくなればなるほど、ダウンロードに必要なラウンドトリップ数も増えていきます。

つまり、リソースの数、そのバイトサイズ、そしてクリティカル パス長は、互いに関連していますが、まったく同じではありません。たとえば、クリティカル リソースの数を減らすことができない場合や、クリティカル パス長を短くすることができない場合でも、クリティカル バイト数を減らすことは重要な最適化となります。それぞれを入れ替えても同じことが言えます。

一般的なクリティカル レンダリング パスの最適化手順:

  1. クリティカル パスを分析して、リソース数、バイト数、パス長の特徴を調べます。
  2. クリティカル リソースの数を最小限に抑えます。リソースの削除、遅延ダウンロード、非同期化などの方法があります。
  3. 残ったクリティカル リソースを読み込む順序を最適化します。すべてのクリティカル アセットをできる限り早くダウンロードすると、クリティカル パス長を短くできます。
  4. クリティカル バイト数を最適化して、ダウンロード時間(ラウンドトリップ数)を削減します。