YSlowをこえる性能改善、ユーザエクスペリエンスの詳細記録 - Netflix

Webサイトのパフォーマンス向上にはYSlowが有益であることは明らかだ。YSlowが素晴らしいのは、背後で動いているプログラムに関係なくある程度のパフォーマンスアップができる点にある。しかしさらにパフォーマンスを向上させようとした場合、細かく計測を実施し、プログラム部分も含めてボトルネックを明らかにすことは無駄ではない。YSlowで実施した作業の裏付けにもなるし、より詳しい計測はより優れた性能改善を可能にする。

Netflix, Director UI Engineering, Bill Scott氏はMeasuring User Experience Performanceにおいてユーザエクスペリエンスのパフォーマンスについて計測するポイントとまとめている。同氏はNetflixでエンドユーザからみたパフォーマンスエクスペリエンスの改善に取り組んでおり、これまでの経験から得たテクニックを説明している。

まずユーザからみた場合、なんらかのアクションを起こしてから、完全にレンダリングが終了したり次のインタラクションが完了するまでが計測の全対象(フルサイクル)となる。このサイクルをさらに細かく計測することで、どこの処理にボトルネックがあるかを明らかにできる。同氏の説明している計測ポイントを要約すると次のとおり。

• (A) クライントからアクションの開始。unloadイベントに時刻記録の処理を追加し、クッキーにその情報を書き込むのが一般的な方法
• (B) サーバにおけるレスポンスの開始時間
• (C) HEAD開始タグの描画要求
• (D) HEAD開始タグの描画開始。HEAD開始タグ要求直後にJavaScriptオブジェクトへ(new Date()).getTime()を保存させるスクリプトレットを送る
• (E) BODY終了タグの描画要求
• (F) BODY終了タグの描画開始。BODY終了タグ要求直後にJavaScriptオブジェクトへ(new Date()).getTime()を保存させるスクリプトレットを送る
• (G) クライアントの描画完了時間。JavaScriptのonloadイベントの完了を記録

ここから次の処理時間が計測できる。

• (G)-(A) フルサイクル時間。ただし検索エンジンから飛んできた場合などはこの方法では計測できない
• (E)-(B) サーバのレスポンスにかかる時間
• (G)-(D) クライアントにおけるレスポンスを得てからの全レンダリング時間
• ((C)-(B))+((G)-(D)) レスポンスがはじまってからクライアントにおけるレンダリングが完了するまでの時間。検索エンジンからの飛んできた場合にも使える計測時間
• (G-)-(F) レンダリング要求が完了してから実際にクライアントでレンダリングが終了するまでの時間

特に((C)-(B))+((G)-(D))が注目だ。ほかの処理時間についてもボトルネック分析に活用できる。同氏が扱っている技術スタックはJava、JSP、Struts2、Tiles2、HTML、CSS、Javascriptとされている。Java技術をベースにクライアントサイドではJavaScriptも活用するというスタイルだ。しかし同氏が説明しているパフォーマンス計測は採用するプログラミング言語によらず活用できる。パフォーマンス改善に取り組んでいるWebデベロッパは同氏のドキュメントを一度検討してみるとよさそうだ。