このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第83回

Navigation Timing APIでサイトパフォーマンスを調査

2012年03月02日 14時57分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 Webサイトの制作では、ページデータの読み込み時間が問題になることがあります。ページが表示されるまでに時間がかかると、ユーザーのストレスが増加し、場合によってはユーザーが離れてしまう場合もあります。すばやく表示されるWebサイトであれば、ユーザーも使いやすいはずです。また、Googleはページの表示速度を検索結果の順位算出に使っていると明らかにしています(Googleの発表)。

 ページの読み込み速度はJavaScriptで計測できます。ところが、JavaScriptではHTMLファイルが読み込まれHTMLの解釈が始まった段階からしか計測できず、どの処理に時間がかかっているのか、詳細な処理時間を把握できません。

 そこで登場したのが、「Navigation Timing API」です。Navigation Timing APIは、DNSの処理時間や、HTTPリクエスト/レスポンス時間など、HTMLの処理の前段階から計測します。さまざまなタイミングで自動的にパフォーマンスが計測され、結果が各種プロパティに格納されます。

【図】fig1.png

 今回は、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に実装されています。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング