[JS]Webページのパフォーマンスをかっこいいストリーミングのグラフで表示できるスクリプト -Justice

Webページのパフォーマンスに関する数値やストリーミングのグラフを簡単に表示できるスクリプトを紹介します。

ブックマークレットとしても利用できるので、自Webページ以外でも表示できます。

サイトのキャプチャ

Justice.js -GitHub

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

top of page

©2024 coliss