HTTP2 で何をサーバープッシュすべきか

意外と何をプッシュすべきか悩んだのでひとまず現時点での自分の結論をまとめました。

サイトの構成によりますが、ページの表示に必要なものは全てプッシュするべきのようです。

まずサーバプッシュの目的を改めて確認しておくと、これはクリティカルレンダリングパスを削減するためです。

サーバープッシュなしの場合 HTML+CSS 構成のページはクリティカルレンダリングパスが必ず2以上になります。つまり最低でもRTTの2倍の時間がページ表示に加算されます。

これをサーバプッシュで行う場合、HTML+CSSを一度に送り返すので、クリティカルレンダリングパスは1になります。

イメージとしてはHTML内の外部CSSが全てインライン style 要素にしてある場合に似ています。ただしサーバプッシュの場合、適切なキャッシュを効かせることができるケースがあるので、インライン style 要素よりも効率的です。

これは場合によると思っています。JSがないとページの表示に致命的な不具合がある場合、サーバープッシュしないと意味がありません。

一方、JS がページのインターフェイスの向上のために使わていて、とりあえずの表示に関係がない場合、JS をプッシュした分、ファーストペイントが遅れます。

そういうわけでなので、JS をプッシュすべきかどうかは場合によるので簡単に決められない気がしています。

理想のサーバープッシュを考えるにあたって、ロードされるリソースの分類をしてみます。

ファーストペイントのために必要なリソース

DOMContentLoaded までに必要なリソース

onload までに必要なリソース

最終的に必ずロードされるリソースなら、プッシュしてしまっていいはずです (初回ロードの場合)。

の順に全てプッシュするのが理想そうです。ただ、現時点で任意の順番に優先順位を明確に決めて送信することはできないような気がしてます。