Webサイトの表示速度を計測するブックマークレット

Webシステムのとある画面について表示速度が遅いという指摘を受けて速度改善を行ったりすることがあります。

「表示されるのが遅い」といっても原因はさまざまです。

 

リンクをクリックしてからサーバにリクエストが送信されるまでの時間。

サーバがリクエストを処理し、場合によってはDBに接続したりする時間。

クライアントにレスポンスを返却する時間とそのサイズ。

クライアント側でレスポンスを受け取ったあとhtmlを描画する時間。

htmlが描画されたあと、JavaScriptのonloadによって行われる処理時間。

 

クライアントやサーバ、ネットワークのスペックが低かったりすることもあります。

 

そんなときは、まずどこの部分に時間が掛かっているのかボトルネックを見つけることが重要です。

今回はその切り分けを助けてくれる素敵なブックマークレットを見つけたので紹介。

 

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

javascript:(function(){%20var%20d=document;%20var%20s=d.createElement('scr'+'ipt');%20s.charset='UTF-8';%20s.language='javascr'+'ipt';%20s.type='text/javascr'+'ipt';%20s.src='//web-tan.forum.impressrd.jp/tools/pagespeedtiming/pagesppedtiming.js?t='+(new%20Date()).getTime();%20d.getElementsByTagName('head')[0].appendChild(s);%20})();

 

 上記のJavaScriptをブラウザのブックマークに登録しておき、計測対象のWebサイトで実行すると計測結果をわかりやすく解説してくれます。

ブラウザの開発者ツールでも解析は可能だと思いますが、とりあえずチェックしてみる、というお手軽さがなんともグッドです。