簡単で便利！Webページのパフォーマンスをヒートマップで視覚化するブックマークレット -Perfmap

1クリックで、Webページのパフォーマンスが最適化がどうかヒートマップを使って視覚的に分かりやすく表示してくれるブックマークレットを紹介します。

PerfMap -GitHub

PerfMapは、ページ上の各画像のローディング時間をヒートマップにして表示するもので、ページが快適に表示されているか確認する指標になります。

表示されている時間は二つあり、一つ目はユーザーが画像を見るために要する時間、二つ目はブラウザがロードするのに要した時間です。
ヒートマップはグリーンに近いほど早く、レッドに近いほど遅いということです。

下部のバーはページ全体のパフォーマンスで、「First Paint」はページの表示が始まった時間、「Fully Loaded」はページ全てのローディングを終えた時間です。

Bookmarklet

PerfMapの使い方は簡単で、下記をChromeのブックマークに加えます。
※対応ブラウザは現在、Chromeのみです。

javascript:(function(){var el=document.createElement('script');el.src='https://zeman.github.io/perfmap/perfmap.js';document.body.appendChild(el);})();

ブックマークに加えたら、あとはWebページを表示し実行するだけ。
例えば、当ブログのページをChromeで表示してみます。

販促会議企画コンペのファイナリストを通過したアイデア・企画書たち

ブックマークから、ブックマークレットを選択。

ブックマークレットを実行

オレンジくらいかなと思ってましたが、グリーンでした。
パフォーマンスを全体的に見るだけでなく、個別の要素ごとにどのタイミングで表示されるのかというのも分かるので、なかなか面白いです。