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