PerfMapは、ウェブページのロード時間をヒートマップ化してくれるブックマークレット。Resource Timing APIを使っているので、それをサポートしたブラウザでなければ動作しない。
セットアップ
ブックマークレット
|
1 |
javascript:(function(){var el=document.createElement('script');el.src='https://zeman.github.io/perfmap/perfmap.js';document.body.appendChild(el);})(); |
Chromeエクステンション
Perfmap – Chrome Web Store
https://chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk?hl=en&gl=GB
使い方
ページのロードが終わったら、ブックマークレットかエクステンションのアイコンをクリックすることでヒートマップが表示される。
ヒートマップに示される色とms値は、画像のロードが完了した時間を示している。すなわち、ユーザが画像を目にするまでの時間。そして、カッコ内の数字は画像のロードだけに要した時間を示している。
ページ下端の凡例はページ全体のロード時間を示している。ヒートマップ上をマウスでポイントすると、その画像がロードされたタイミングを凡例上にインジケータで示してくれる。
ページのロード時間はブラウザ組み込みの開発者向けツールなどを使っても知ることができるけど、ヒートマップとして可視化されると、どの要素がボトルネックになっているのか一目瞭然だ。ウェブページのチューンアップのためのツールとして便利に使えそう。
参考サイト
zeman/perfmap
https://github.com/zeman/perfmap