Web pageのパフォーマンスの測定手法
概要
この記事は，第6回 Web System Architecture 研究会 (WSA研)の原稿です． websystemarchitecture.hatenablog.jp
スライド speakerdeck.com
はじめに
Web pageのパフォーマンスを定量的に測定する方法について調査した． ユーザがWeb pageの描写が遅いと感じたらWeb pageを開く前に別のWeb pageに移動したりWeb pageを閉じることもあるので，パフォーマンスを測定してWeb pageのパフォーマンスを改善することが重要である．
Webの開発向けの診断ツールとしてGoogleが公開している「Lighthouse」*1などがある． Lighthouseのパフォーマンスに関する項目*2について以下に示す．
| 指標 | 説明 |
|---|---|
| First Contentful Paint | Pageにアクセスしてからはじめに文字や画像が描画されるまでの時間 |
| Speed Index | Pageの描画する速度を示す指標 |
| Time to Interactive | Pageが操作できるまでの時間 |
| First Meaningful Paint | Pageのコンテンツが表示されるまでの時間 |
| First CPU Idle | Page描画を行うスレッドがはじめにアイドル状態になるまでの時間 |
| Estimated Input Latency | ユーザの入力遅延 |
今回は，pageの描画する速度を示す指標であるSpeed Indexに注目して各Web pageを定期的に測定を行うツールを作成して，値の変化について考察を行った．
Speed Index
Speed Indexは，Web pageの描画する速度を示す指標*3である． この指標は，Web pageの可視部分が表示されるまでの平均時間であり，Web pageのコンテンツがどれだけ早く視覚的に表示されるのかを測定する． また，測定値は低いほど良いWeb pageである．
Speed Indexのイメージ*4
同じコンテンツで2つのWeb pageがあるとする．このWeb page AとBは両方ともロード完了までの時間は等しい．
- A : はじめのロード時に読み込み量が多くロードの終わりにつれて読み込み量が少ないWeb page
- B : はじめのロード時に読み込み量が少なくロードの終わりについて読み込み量が多いWeb page
2つのWeb page AとBの描画完了するまでの読み込み量の時系列グラフは以下である．
2つのWeb pageのSpeed Indexの値は以下である．
よって，2つのWeb page AとBでは，AのSpeed Indexの値が低い結果になる．
netsimon
今回の実験を行うために，netsimon(NET Speed Index MONitoring)を作成した． netsimonは，複数のWeb page のSpeed Indexを定期的に測定を行うためのツールである． github.com
測定動作
- Web pageにアクセス
- Web pageを取得
- Speed Indexなどの指標を計算
- Speed Indexなどの指標をデータベースに格納
- Speed Indexなどの指標を時系列で可視化
データベースはElasticsearch*5，可視化はkibana*6を利用した．
netsimonの測定結果
2週間，5分に一回の間隔で以下のWeb pageなどを対象に測定を行った．
- https://www.google.com/
- https://www.amazon.co.jp/
- https://www.yahoo.co.jp/
- https://www.apple.com/
- https://www.youtube.com/
- etc.
測定結果を以下に示す．
考察
YoutubeやAppleなどは，表示するコンテンツによってSpeed Indexの変化していることがわかり，コンテンツの変化が大きく影響している可能性がある． また，Speed Indexの変動は，CDNやDNSの影響が受けていると考えられる．
まとめ
定期的にWeb pageのSpeed Indexを測定するツールを作成して二週間程度測定した．
CDNやDNSの性能評価にSpeed Indexは利用できるか， また，Web pageのアクセス時のネットワークのレイテンシによって， どのように表示する量や内容の変更を行うのか検討したい．
