このスライドで話したことの続き。レンダリングのパフォーマンスを計測するのに DOMContentLoaded は妥当ではない、という話があったので、First Paint による時間を計測する。First Paint については以下のページが詳しい。
Chrome の Console 上で以下を実行し、First Paint の時間を計測する。出力される値の単位は秒になる。 サーバーやブラウザといった計測環境はスライドに記載されている環境の通り。
window.chrome.loadTimes().firstPaintTime - window.chrome.loadTimes().startLoadTime
DOMContentLoaded と傾向はそれほど大きく変わらないようだ。また、サーバープッシュを使えばレンダリングが速くなるわけではない、というところにも変化はない。
サーバー | プロトコル | サーバープッシュ | First Paint |
---|---|---|---|
H2O | HTTP/1.1 | - | 5.9723 |
H2O | HTTP/2 | - | 9.4773 |
H2O | HTTP/2 | CSS | 6.3579 |
H2O | HTTP/2 | JavaScript | 13.9929 |
H2O | HTTP/2 | Above the Fold | 17.4133 |
H2O | HTTP/2 | CSS & JavaScript | 8.5565 |
H2O | HTTP/2 | CSS & JavaScript & Above the Fold | 15.1736 |
nghttpx | HTTP/2 | - | 2.9650 |
nghttpx | HTTP/2 | CSS | 18.5551 |
nghttpx | HTTP/2 | Above the Fold | 3.4625 |