網頁載入有多少 request、查多少 Domain,總共花費多少時間... 等等,此 JavaScript 可以接撈出一個頁面整合查看。
查看網頁各階段載入速度的 Bookmarklet
此程式主要使用 JavaScript Timing API 來達成:
Source code:micmro/performance-bookmarklet: Performance-Bookmarklet helps to analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - requests by type, domain, load times, marks and more. Sort of a light live WebPageTest.
要做成自己的 Bookmarklet,只要將下述直接拉到"我的最愛"那條書籤列即可:
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);})();
從外部網站測試的工具:WebPagetest - Website Performance and Optimization Test