編集長ブログ―安田英久
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット

ページ表示にサーバーとブラウザのどこで時間がかかっているか一発で表示するブックマークレット

今日は、Webサイト表示の高速化に役立つツールを紹介します。あるページを表示するのに、サーバー側とブラウザ側の、どこで時間がどれぐらいかかっているのかを、一発でわかりやすく表示してくれるブックマークレットです。

※Chromeでは右クリックからブックマークへの追加ができないので、次のようにします

  1. リンク右クリックして[リンクアドレスをコピー]
  2. アドレスバーの[☆]をクリック
  3. [編集]ボタンをクリック
  4. [URL]にカーソルを移動して中身を全部消してクリップボードの内容を貼り付ける
  5. [名前]には「ページ速度チェック」とか適当に入れる

ページ表示のどこに時間がかかったかチェックするブックマークレット(このリンクを右クリックでブックマークに追加)

まず、↑このリンクを右クリックしてブックマーク(お気に入り)に追加してください。

(よくわからない場合は上記のリンクをクリックすれば、このページ表示の速度をその場で分析できます)

その後、表示速度が遅い原因を調べたいページをブラウザ表示した状態でこのブックマークレットを実行すると、そのページ内に、次のような速度分析が表示され、ページ表示のどの部分にどれぐらい時間がかかっているかが一目でわかります。

開いたウィンドウの右上の[x]をクリックで閉じます。

「パートごとの時間のかかり具合(詳細)」のセクションでは、標準的な時間よりも遅い部分は強調表示したうえで、その原因と簡単な対処法を解説していますので、参考にしてください。

ただし、注意してください。これは、いまブラウザで表示している「そのページ」の「そのアクセス」でどんな風に時間がかかったかを表示しているものです。つまり、そのときのネットワークとサーバーの状況と、あなたの使っているブラウザやPCの性能が反映されているもので、そのページ表示の代表的な統計値ではありません。

実は、同様のことは今ならばGoogleアナリティクスでも自動的に調べられています。

Googleアナリティクスで[コンテンツ]>[サイトの速度]>[ページ速度]を開いて、上の[パフォーマンス]タブを選ぶと下にいろんな項目が並んでいます。

ここを見れば、サイト全体の統計情報としてもっと信頼性のあるデータを確認できるのですが……ちょっとわかりづらいんですよね。Googleアナリティクスのこのデータを見てぱっと対処方法がわかる人は少ないと思います。

ですので、まずはわかりやすくする取っかかりとして、このブックマークレットを作りました。

中でやっているのは、W3Cの仕様として作られた「Navigation Timing」という仕様に基づいたデータを参照しているだけです。

これに対応しているブラウザであれば、自動的に各タイミングが計測されて保存されているので、ページを表示したあとでそれぞれの処理にどれだけ時間がかかったかを調べられるのです。

基本的に、次のような形でブラウザが動作していて、その各タイミングで時間が記録されています。

Navigation Timing
2012年12月17日版の勧告よりも2013年1月25日に出たEditor's Draftのほうが実際のブラウザの動作に合っているようなのでそちらを参照しています。

これを参考に、サイトのどこがどう遅いのか、チェックしてみてくださいませ。

もし動作に不具合があるようでしたら、記事へのコメントなどでお知らせください。ただし、そもそもNavigation Timing(window.performance.timing)が使えないブラウザは何をやっても私ではサポートできませんので、別のブラウザをお使いくださいませ……。

この記事が役に立ったらシェア!
tweet730このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

EMD
EMDは「Exact Match Domains」の略で、「完全一致ドメイン名」 ... →用語集へ

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

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore