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