ケーススタディ2:ビートップス

ケーススタディ2:ビートップス

ビートップスのトップページ
ビートップスのトップページ

テレビ通販・テレビショッピングサイトであるビートップスのトップページ(www.b-tops.com)は、ページ総容量が平均1.1MB、HTTPリクエスト数130(※測定時点の数値)の、今回計測した3サイトの中で最も容量が大きなページである。

初めに、バックボーンテスト※1の結果から得られた、応答時間の平均値(4時間ごと)を示した折れ線グラフを確認していこう。

時系列でみた平均応答時間の変化(ビートップス)
時系列でみた平均応答時間の変化(ビートップス)
  • 平均応答時間:2.001秒
  • 最小応答時間:1.137秒
  • 可用性:100%
  • 標準偏差:1.94秒

バックボーンテストの測定期間中、ほとんどの時間帯で約2秒の応答時間と安定(平均応答時間:2.001秒)しているものの、5秒前後の急な増加を数回記録している。この結果が何の影響によるものか、サーバー監視やアクセス解析との併用で調査を行うべきだといえる。

続いて、ラストマイルテスト※2でユーザーが実際に体験している応答時間を測定したのが次のグラフだ。バックボーンテストに比べて、さまざまなユーザー環境の違いが反映されたデータになっている。

時系列でみた接続回線別の平均応答時間の変化(ビートップス)
時系列でみた接続回線別の平均応答時間の変化(ビートップス)
接続回線平均応答時間可用性エラー数テスト回数
ダイアルアップ接続50.765秒32.14%1928回
低速ブロードバンド接続36.715秒90.53%995回
高速ブロードバンド接続8.401秒98.96%2193回

512kbps以下の中低速回線では応答時間が急激に増加していることが確認できる。さらにダイアルアップ接続(56kbps以下)では、可用性が32.14%に激減、これは28テスト中19テストにおいて2分以内にページ表示が正常に行われなかったことを示している。

接続回線別通信フェーズ毎の応答時間(ビートップス)
通信フェーズダイアルアップ接続低速ブロードバンド接続高速ブロードバンド接続
応答時間50.765秒36.715秒8.401秒
DNS Time0.853秒0.747秒0.296秒
Connect Time1.858秒1.748秒0.265秒
1st Byte Time41.365秒24.541秒8.153秒
Content Time61.584秒45.892秒7.030秒

通信フェーズごとの数値を確認すると、特に回線速度が遅い場合には応答時間に占める1st Byte TimeとContent Timeの比率が高く、オブジェクトの容量とHTTPリクエスト数が影響していることが想定できる。

ビートップスへのプロのパフォーマンス改善ポイント

バックボーンテストの結果から代表的なデータを1つ選び、ウォータフォールグラフにしてさらに深い分析を行った。

通信フェーズ別の接続状況のウォーターフロー図(ビートップス)

JavaScriptの記述場所によるダウンロードの効率化

グラフから、Google Analyticsへのデータ送信が、ページの読み込み開始直後に行われているのが確認できる(7行目)。HTTP Keep Aliveを使用していても、JavaScriptの読み込み後にキューに入力されたオブジェクトは、そのJavaScriptが実行されるまではダウンロードが中断されるため、JavaScriptはできるだけソースの下のほうに記述するのが望ましい。また、パフォーマンスの観点からだけでなく、ページ表示が完了する遥か前にGoogle Analyticsへのデータ送信が行われると、ページビュー数の集計に影響が及ぶ可能性も考えられる(Google Analyticsのトラッキングコードは、ページの</body>タグ直前への設置が推奨されている)。

ホスト追加による並列ダウンロード数の増加

すべての画像が1つのホスト(125.29.37.197)からダウンロードされている。HTTP Keep Aliveを使用することで同時に2ファイルを並列ダウンロードできるが、さらにホストを追加することで3ファイル以上の並列ダウンロードが可能になる。ホストへの接続時間(DNS TimeとConnection Time)を差し引いても全体的なパフォーマンス向上が達成できるかもしれない。

CSSスプライトやイメージマップを活用したHTTPリクエストの削減、画像を除くオブジェクトファイルのgzip圧縮など、ケーススタディ1で述べた内容は説明を割愛しているので、そちらも参照してほしい

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

人気記事トップ10(過去7日間)

今日の用語

CGM
主にインターネット上で消費者が書き込むことで内容が生成されていくメディアのこと。 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]