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のアクセス時のネットワークのレイテンシによって, どのように表示する量や内容の変更を行うのか検討したい.