Performance-Analyserは、ウェブページのパフォーマンスを解析して可視化してくれるブックマークレット。Resource Timing API、Navigation Timing API、User-Timingを使っているので、それらをサポートしたブラウザでなければ動作しない。
セットアップ
ブックマークレット
javascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy and paste the content of:\n\n\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\"\n\ninto your console instead\n\n(link is in console already)");console.log("https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js");};document.getElementsByTagName('body')[0].appendChild(el);})();
Chromeエクステンション
Performance-Analyser – Chrome ウェブストア
https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf
使い方
ページのロードが終わったら、ブックマークレットかエクステンションのアイコンをクリックすることで解析結果が表示される。ウェブページのチューンアップのためのツールとして便利そう。
参考サイト
micmro/performance-bookmarklet
https://github.com/micmro/performance-bookmarklet