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