[JS]Webページのパフォーマンスをかっこいいストリーミングのグラフで表示できるスクリプト -Justice
Post on:2015年6月25日
Webページのパフォーマンスに関する数値やストリーミングのグラフを簡単に表示できるスクリプトを紹介します。
ブックマークレットとしても利用できるので、自Webページ以外でも表示できます。
Justice.jsのデモ
デモでは、Justiceがどんな感じか試せます。
TTFB(Time to First Byte)やロード時間やリクエスト数などが表示され、数値はグリーンは良好、イエローは注意、レッドは超過となっています。
当ブログのパフォーマンスも表示させてみました。
Justiceのパネルの右上にあるボタンをクリックすると、非表示になります。
コリスでも試してみました。
対応ブラウザの明記はないのですが、Chromeでは全部表示され、Safariでは一部ダメでした。
Justice.jsの使い方
使い方は、2通り。
Webページに直接埋め込む
外部スクリプトとして記述することで、Webページで利用できます。
<script type="text/javascript" src="justice.min.js"></script> <script type="text/javascript"> Justice.init(); </script>
ブックマークレットで利用する
ブックマークレットで簡単に利用することもできます。
下記をブラウザのブックマークに加え、ブラウザにWebページを表示しブックマークで指定するだけです。
sponsors