Akamai Diversity
Home > Web Performance > WebPagetestをご存知ですか?

WebPagetestをご存知ですか?

WebサイトオーナーやWebサイト運営に関わる皆さん、自社のWebサイトのパフォーマンスを把握されていますか?
Webサイトのパフォーマンスを定期的に測定したり、競合サイトのパフォーマンスと比較してみることは、Web戦略において非常に重要な作業です。その為のパフォーマンス測定ツールには様々なものが存在しますが、今回はその中でも無料で簡単に利用できるWebPagetestについて、基本的な使い方やTips、アカマイ化されたサイトでの活用法についてご紹介します。  

WebPagetestはAOLにより開発され、2008年にBSDライセンス配下でオープンソース化されました。現在はGoogleによりオープンソースプロジェクトとして提供されております。
WebPagetestはオンラインで利用可能なパブリックインスタンスとプライベートインスタンスがあり、プライベートインスタンスはオンプレミスやクラウド上にインストールして利用可能です。その名の通りプライベートな専用環境として自前のリソースで利用するものです。一方でパブリックインスタンスは、世界に分散配置されたサーバにインストールされ、WEBサイトwww.webpagetest.orgから簡単に利用できるように運用されています。(Tokyoのロケーションを選択すると弊社のロゴが表示されますが、アカマイはパートナー企業としてTokyoのテストエージェントを提供しております。) 
  
www.webpagetest.orgは下図のように実際のブラウザをWebPagetestサーバからAPIを通じて動作させ、その結果を取得しています。モバイル端末の実機をエージェントとして利用可能なロケーションもあります。 
WPT.png
 
テストの方法
テストの実行は簡単です。計測対象のWebサイトのURLを入力し、ロケーションとブラウザをドロップダウンで選択して"START TEST"をクリックするだけです。
デフォルトでは1回だけテストを実行した結果のFirstView(対象ページに初めてアクセスした状況)とRepeatView(対象サイトに再度アクセスした状況)を表示します。"START TEST"をクリックする前にAdvanced Settingからテスト回数を複数回に増やしてテストを実行すると、それぞれの回数実行した結果の中央値を表示します。正確な値を取得するためには、3回以上実行するのがお薦めです。以下は3回テストをした結果の中央値ですが、First Viewの右横にRun3と表示されておりますので、First Viewでは3回目の結果が中央値であることを意味します。なお、「Connection」から各種通信回線をエミュレートした場合のテストを実行することも可能です。
 
test-result.png
 
 
SpeedIndexとは
パフォーマンス結果項目のそれぞれの意味はこちらのリンク先を参照ください。 ここではWebPagetestのユニークな指標であるSpeedIndexについてご紹介します。SpeedIndexはブラウザ上の描画速度を示す指標です。下記の図のように描画されていない箇所を積分した値を求めます。数値が小さいほど描画されていない箇所が少ない、すなわち描画が速いことを意味しますので、ブラウザでの描画スピードを数値で比較することができます。
 
speedindex.png
 
 
パフォーマンス比較ビデオの作成
WebPagetestでは、SpeedIndexによる数値の比較だけではなく、実際の見た目でサイトパフォーマンス差異を比較するビデオを作成することも可能です。
画面上部のリンク「TEST HISTORY」をクリックするとテストの履歴が参照できますが、比較対象テストの左側のチェックボックスをオンにしてCompareボタンをクリックすると、テスト結果の比較ページが生成されます。
 
history.png
 
 
そこで、「Create Video」ボタンをクリックすると、パフォーマンス比較ビデオが再生できるようになります。
 
wptvideo.png
 
ビデオはmp4形式でダウンロード可能ですので、パワーポイントに貼り付けてプレゼンテーションとして見せることも可能ですし、iframeで動画を呼び出すためのコードが生成されますので、それをコピーして利用することも可能です。この比較ビデオは「Visial Comparison」のタブのところから生成することも可能ですが、Historyから生成したほうが複数のテスト結果から選択したものでビデオを生成できるので便利です。  
 
 
Webサイトの問題の特定
パフォーマンス結果の数字から、サイトのパフォーマンスに問題があることがわかった場合、原因を特定することにもWebPagetestは役に立ちます。例えば、結果ページの中央にある「Waterfall」のグラフをクリックすることで参照できる「Waterfall View」では、対象のWebページに含まれる個々のURL毎に、どの種類の処理にどれだけ時間がかかったかを確認できますので、レンダリング処理の問題を特定するのに役立ちます。
この「Waterfall View」の結果からわかる問題点について、幾つかの例を示します。
下図では、あるJSのダウンロードの後に大きなギャップが見られます。これは途中の98行目のJava Scriptの実行完了まで、次の処理が進行できない問題があると想定できます。  
 
waterfall.png
また、バーの長さがその処理に要した時間を表しますが、それぞれのバーの色によって問題点が判断できます。
 
wpt-color.png
 
例えば、下図では緑色の部分が長いことから、DNSの名前解決に時間がかかっていることがわかります。これが測定対象URLのドメインであれば、Keep aliveの見直し、3rd partyドメインであれば、DNS prefetching(外部ドメインへのハイパーリンクの名前解決を先に実行する)の利用を検討できます。  
 
Thumbnail image for Thumbnail image for Thumbnail image for Thumbnail image for Thumbnail image for bar-dns.png
 
下図のBeforeで表示されているグラフは、htmlページ配信のFirst Byteに時間がかかっていて、その結果レンダリングが遅延していることがわかります。Afterのグラフでは、AkamaiのEdge Start機能(アカマイサーバがHTMLの先頭部分を先に送信)を使ってFirst Byteの遅延が解消し、全体のレンダリング完了までの時間が短縮されています。
 
Thumbnail image for Thumbnail image for TTFB.png
 
このようにWebPagetestを利用することで、Webページに内在するボトルネックの発見やFront End Optimizationによる高速化の効果を確認することが容易になります。これらはあくまで一例ですが、他にもWEBパフォーマンス改善の為の様々な分析が可能です。
 
 
アカマイ化されたサイトの測定
アカマイ化されたサイトをWebPagetestで測定する場合、Script機能を有効に利用することによって、テスト結果に加えてアカマイに特化した情報を得ることが可能です。
一例として、キャッシュヒットしたかどうかの情報をWebPageTestの結果から得たい場合は、Scriptに以下のようにAkamaiのデバッグヘッダをセットすることによって、テスト結果のレスポンスがキャッシュから直接配信されたものか、オリジンサーバから取得したレスポンスなのかを確認できます。 
 
Script入力例:
addHeader Pragma: akamai-x-cache-on, akamai-x-cache-remote-on, akamai-x-check-cacheable
navigate <対象URLを入力>
 
例えばキャッシュ対象のコンテンツの種類を増やした結果、それがパフォーマンスにどう影響したかを見る場合などに有効です。
 
cache-response.png

X-Cache :<キャッシュにヒットしたか(hit or miss)>
X-Check-Cacheable:<キャッシュ可能なコンテンツかどうか>
 
他にも様々なScriptが利用できます。詳細はこちらを参照ください。キャッシュ情報以外にもアカマイでは様々なデバッグヘッダを提供していますので、同様にScriptに記述することによって、様々な情報を得ることができます。例えばFront End Optimizationの有効化状況やAdaptive Image Compressionの圧縮率などをレスポンスヘッダから確認することが出来ます。
 
 
http/2に対応したサイトの測定
最後にhttp/2に関するTipsについて少しご紹介します。
WebPagetestはデフォルトでhttp/2に対応していますが、各リクエストをクリックし、そのDetailsを見るとhttp/2に特化した情報が参照できます。下図のようにストリーム番号や重み付け、優先度、サーバプッシュされたコンテンツであれば、そのポート番号等が表示出来ます。「Waterfall View」と合わせて確認する事で、http/2の詳細が確認出来ます 。
 
wpt-http2.png
なお、WebPagetestのエージェントはデフォルトでhttp/2が有効となりますが、http/2とhttp1.1のパフォーマンス差を比較する場合は、以下の方法でhttp/2を無効化できます。http/2を無効化した結果をあわせて取得することでhttp/2とhttp1.1の比較が可能です。

<Chromeの場合>
ChromeタブのCommand lineに以下を入力
--disable-http2  
 
disable-h2.png
 
<FIrefoxの場合>
Scriptに以下を入力
firefoxPref network.http.spdy.enabled false
firefoxPref network.http.spdy.enabled.http2 false
firefoxPref network.http.spdy.enabled.v3-1 false
navigate <対象URLを入力>
 
firefox-disableh2.png
 
 
 
いかがでしたでしょうか。
ご紹介したのは、WebPagetestの一部の機能ですが、他にも様々な分析が出来るパワフルなツールです。APIも公開されてますので、パフォーマンス計測を自動化して定期的に実行することも可能です。
WEBサイトのパフォーマンスの変化を定期的に確認し、問題点の改善を継続して実施することによって、より良いユーザー体験の提供につながります。
また、アカマイの機能を利用した場合の導入前後の効果を判断する指標の一つとしても有効です。ぜひWebPagetestを活用してみてください。  
 

Leave a comment