意外と何をプッシュすべきか悩んだのでひとまず現時点での自分の結論をまとめました。
CSS は必ずプッシュ・JSは場合による
サイトの構成によりますが、ページの表示に必要なものは全てプッシュするべきのようです。
- CSS の全て
- ページの根幹に関わるJSの全て
サーバプッシュの目的
まずサーバプッシュの目的を改めて確認しておくと、これはクリティカルレンダリングパスを削減するためです。
クリティカルレンダリングパスについては クリティカル レンダリング パスのパフォーマンスを分析する | Web Fundamentals - Google Developers がわかりやすいです。
サーバープッシュなしの場合 HTML+CSS 構成のページはクリティカルレンダリングパスが必ず2以上になります。つまり最低でもRTTの2倍の時間がページ表示に加算されます。
これをサーバプッシュで行う場合、HTML+CSSを一度に送り返すので、クリティカルレンダリングパスは1になります。
イメージとしてはHTML内の外部CSSが全てインライン style 要素にしてある場合に似ています。ただしサーバプッシュの場合、適切なキャッシュを効かせることができるケースがあるので、インライン style 要素よりも効率的です。
JSをプッシュすべきか
これは場合によると思っています。JSがないとページの表示に致命的な不具合がある場合、サーバープッシュしないと意味がありません。
一方、JS がページのインターフェイスの向上のために使わていて、とりあえずの表示に関係がない場合、JS をプッシュした分、ファーストペイントが遅れます。
そういうわけでなので、JS をプッシュすべきかどうかは場合によるので簡単に決められない気がしています。
理想のサーバープッシュ
理想のサーバープッシュを考えるにあたって、ロードされるリソースの分類をしてみます。
クリティカルリソース (ブロッキングアセッツ)
ファーストペイントのために必要なリソース
- CSS
- ブロックする JS (async/defer のない script 要素)
- HTML
DOMContentLoaded リソース
DOMContentLoaded までに必要なリソース
- defer された script
onload リソース
onload までに必要なリソース
- 画像
- async された script
どうプッシュするか
最終的に必ずロードされるリソースなら、プッシュしてしまっていいはずです (初回ロードの場合)。
- クリティカルリソース
- DOMContentLoaded リソース
- onload リソース
の順に全てプッシュするのが理想そうです。ただ、現時点で任意の順番に優先順位を明確に決めて送信することはできないような気がしてます。
