Ilya Grigorik
最初のレンダリングまでの時間を可能な限り短縮するには、次の 3 つの変数を最小限に抑える必要があります。
- クリティカル リソースの数。
- クリティカル パス長。
- クリティカル バイト数。
クリティカル リソースとは、ページの最初のレンダリングをブロックする可能性のあるリソースです。リソースが少ないほど、ブラウザ、CPU、その他のリソースに対する作業量も少なくなります。
同様に、クリティカル パス長は、クリティカル リソースとそのバイトサイズ間の依存関係グラフの関数です。一部のリソースのダウンロードは、前のリソースが処理された後にのみ開始され、リソースが大きいほどダウンロードに必要なラウンドトリップ回数が増えます。
最後に、ブラウザがダウンロードする必要があるクリティカル バイトが少ないほど、ブラウザはコンテンツをより高速に処理して画面上にレンダリングできます。バイト数を減らすには、リソースの数を減らし（排除するか、重要性をなくす）、各リソースを圧縮して最適化することで転送サイズを最小限に抑えることができます。
クリティカル レンダリング パスを最適化するための一般的な手順は次のとおりです。
- リソース数、バイト数、長さなど、クリティカル パスを分析して特徴付けます。
- 重要なリソースの数を最小限に抑えます。たとえば、リソースを削除する、ダウンロードを遅らせる、非同期としてマークするなどです。
- クリティカル バイト数を最適化して、ダウンロード時間（ラウンドトリップ数）を短縮します。
- 残りの重要なリソースの読み込み順序を最適化する: すべての重要なアセットをできるだけ早くダウンロードして、クリティカル パスの長さを短くします。