クリティカル レンダリング パスの最適化

最初のレンダリングまでの時間をできるだけ短縮するには、次の 3 つの要素を最小限に抑える必要があります。

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

クリティカル リソースは、ページの最初のレンダリングをブロックする可能性のあるリソースです。クリティカル リソースが少なければ少ないほど、ブラウザ、CPU、その他のリソースの作業も少なくなります。

同様に、クリティカル パス長は、ページに必要なすべてのクリティカル リソース間の依存関係グラフと各リソースのバイトサイズから決まる値です。一部のリソースのダウンロードは前のリソースの処理が完了しないと開始できず、リソースが大きくなれば、ダウンロードに必要なラウンドトリップ回数が増えます。

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

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

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