|
|---|
Webサイトの制作では、ページデータの読み込み時間が問題になることがあります。ページが表示されるまでに時間がかかると、ユーザーのストレスが増加し、場合によってはユーザーが離れてしまう場合もあります。すばやく表示されるWebサイトであれば、ユーザーも使いやすいはずです。また、Googleはページの表示速度を検索結果の順位算出に使っていると明らかにしています（Googleの発表）。
ページの読み込み速度はJavaScriptで計測できます。ところが、JavaScriptではHTMLファイルが読み込まれHTMLの解釈が始まった段階からしか計測できず、どの処理に時間がかかっているのか、詳細な処理時間を把握できません。
そこで登場したのが、「Navigation Timing API」です。Navigation Timing APIは、DNSの処理時間や、HTTPリクエスト／レスポンス時間など、HTMLの処理の前段階から計測します。さまざまなタイミングで自動的にパフォーマンスが計測され、結果が各種プロパティに格納されます。
- Navigation Timing API
- https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
今回は、Navigation Timing APIを使ってWebページのパフォーマンスを計測し、結果をGoogle Visualization APIを使ってグラフとして表示するサンプルを作ります。計測結果はHTML5のローカルストレージを利用して保存し、保存した計測結果もグラフ化して見比べられるようにします。ローカルストレージについては以下の記事を参照してください。
- 第40回 サーバー不要で保存できる「Web Storage」の使い方
- http://ascii.jp/elem/000/000/557/557064/
Navigation Timing APIは、2012年3月2日現在、Google ChromeとFirefox 7以降、Android OS 4に実装されています。
