The blue for Initiator Type "links" is pretty much the same tone as Content Download

I have modified the performance bookmarklet so that it runs within an iframe with it's own security sandbox (so that the code is only loaded as needed, and so I don't need to audit your code much!). The performance data is passed from the "host" document to the "guest" iframe using sendMessage.

I have attached the code here to give an idea of the changes, although it would need a few hours work for anyone to use.

The function to show the performance metrics (e.g. connected to a button), run from the "host" document is:

function showTiming() {
	function objectify(object) {
		return JSON.parse(JSON.stringify(object));
	}
	var performance = window.performance;
	if (!performance || !performance.getEntriesByType) return;
	var perf = {
		resources: objectify(performance.getEntriesByType('resource')),
		marks: objectify(performance.getEntriesByType('mark')),
		measures: objectify(performance.getEntriesByType('measure')),
		timing: objectify(performance.timing),
		navigation: objectify(performance.navigation)
	};

	var html = '<script src="https://some.domain.here/performance-bookmarklet.js"></script>';
	var secondBody = document.createElement('body');
	secondBody.innerHTML = '<iframe class=nobox frameborder=0 src="about:blank"></iframe>';
	var iframe = secondBody.firstChild;
	if ('srcdoc' in iframe) {
		iframe.setAttribute('sandbox', 'allow-scripts');
		iframe.setAttribute('referrerpolicy', 'no-referrer');
		iframe.srcdoc = html;
	} else {	// srcdoc not IE but will be introduced in Edge 18
		setTimeout(function() {	// IE needs iframe to be in document so use postpone
			var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
			iframeDoc.open();
			iframeDoc.write(html);
			iframeDoc.close();
		}, 0);
	}
	iframe.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:10000;';
	iframe.onload = function() {
		iframe.contentWindow.postMessage(perf, '*');
		iframe.onload = null;
	};
	var closeButton = document.createElement('button');
	closeButton.textContent = 'close';
	closeButton.style.cssText = 'position:fixed;top:20px;left:20px;z-index:10001;background-color:#BBF;';
	closeButton.onclick = function() {
		document.body.style.overflow = '';
		document.documentElement.removeChild(secondBody);
	}
	secondBody.appendChild(closeButton);
	document.body.style.overflow = 'hidden';
	document.documentElement.appendChild(secondBody);	// looks odd, but html spec does allow multiple body elements
}

I edited the compiled performance-bookmarklet.js (Yes this is a very dirty technique. Done because I didn't want to edit source code as then I would need to run your build process which would have taken me more time and I needed the code to work with our custom build process).

We put the following code around the performance-bookmarklet.js code (dirty: monkey patches window.performance to read the local data)

(function () {
	function go(perf) {
		window.performance = {
			timing: perf.timing,
			navigation: perf.navigation,
			getEntriesByType: function(type){
				if (type == "resource") {
					return perf.resources;
				} else if (type == 'mark') {
					return perf.marks;
				} else if (type == "measure") {
					return perf.measures;
				}
			}
		};
		execBookmarklet(withinIframe);
		window.performance = null;
	}

	if (window.doubleLoad) {
		return;
	}
	window.doubleLoad = 1;

	var withinIframe = window.top !== window.self;
	if (withinIframe) {
		window.onmessage = function(event) {
			var perf = event.data;
			if (perf.resources) {
				go(perf);
			}
		};
	} else {	// Called by 'Timing Graph Debug'
		var objectify = function(object) {
			return JSON.parse(JSON.stringify(object));
		}
		go({
			resources: objectify(window.performance.getEntriesByType("resource")),	// JSON.parse(JSON.stringify(window.performance.getEntriesByType("resource")))
			marks: objectify(window.performance.getEntriesByType("mark")),
			measures: objectify(window.performance.getEntriesByType("measure")),
			timing: objectify(window.performance.timing),
			navigation: objectify(window.performance.navigation)
		});
	}

	// put copyright into a string stored on an object so that the copyright isn't removed during compression
	execBookmarklet.copyright = 'Copyright 2014 Michael Mrowetz. MIT License: https://github.com/micmro/performance-bookmarklet/blob/d3e037620270419521eab20bf479c51c8ea72d96/LICENSE';

function execBookmarklet(withinIframe) {
// INSERT BOOKMARKLET CODE HERE
}
})();

The BOOKMARKLET CODE itself also has a few modifications.

Don't read localStorage (causes exception):

if (!withinIframe)
	var persistanceEnabled = !!JSON.parse(localStorage.getItem(storageKey));

Change the IFrameHolder code:

iFrameHolder.getOutputIFrame = function () {
	return outputIFrame;
};

module.exports = iFrameHolder;

if (withinIframe) {
	module.exports = {
		setup: function (onIFrameReady) {
			function addComponent(domEl) {
				document.body.appendChild(domEl);
			}
			var styleTag = dom.newTag("style", {
				type: "text/css",
				text: style
			});
			document.head.appendChild(styleTag);
			var outputHolder = dom.newTag("div", { id: "perfbook-holder" });
			var outputContent = dom.newTag("div", { id: "perfbook-content" });
			outputHolder.appendChild(outputContent);
			document.body.appendChild(outputHolder);
			onIFrameReady(addComponent);
		},
		getOutputIFrame: function(){
			return document;
		}
	};
}

Add connection details (very important for HTTP2 connection versus HTTP1.1 connection):

	var connection = navigator.connection;
	if (connection) {
		createAppendixDefValue(appendix, dom.newTag("abbr", { title: "Connection", text: "navigator.connection.*" }), "");
		for (var key in connection) {
			var value = connection[key];
			if (value && typeof value != "function") {
				createAppendixDefValue(appendix, dom.newTextNode("\xa0\xa0" + key + ":"), value);
			}
		}
	}

	tilesHolder.appendChild(appendix);
	return tilesHolder;

Dont check for about: protocol:

if (withinIframe) {
	if (!data.isValid()) {
		return;
	}
} else {
	if (location.protocol === "about:" || !data.isValid()) {
		return;
	}
}

Commented out dead code:

		// window.outputContent;

The final change was to remove the negative right margins (replaced -18px and -72px with 0 in the css style).

I have written this issue so that if anyone else wants to use your code others can branch and build on these snippets. Hopefully it is useful to someone so maybe just leave the issue open?!

I really really appreciate your code - it still works beautifully (2019).

It's bit of an edge case but doesn't look good.

• should second lines or markers be hidden for request with more than ~30sec?
• Should later pings be ignored (onload + debounce 2 seconds )?

Summarize key measures

• TTFB
• domContentLoaded
• Onload
• Domains Total
• Subdomains of TLD
• Current TLD & Subdomain Requests
• Requests to Host
• CrossDomain Requests (document.domain)

Allow Sorting/filtering of resources by domain and type (if possible)

The project is very useful for web performance, I want to use it in my project, but I need some API to save performace data for analysing user's performace, can you give me some advise?

Hi, thanks for this brilliant script!

Is there any way to export report into html file?

Hi

This project is still alive ? Could i use it with Angular5 ?
Do you have more documentation ?
Regards
Phil

subDomainsOfTdl should be subDomainsOfTld?

• pie chart - done
• Table with the following
  || FileType || Count || Count Internal || count external || Count by Initiator Type || Initiator Type Internal || Initiator Type external ||
• Table by Domain?

Because when the window is scrolled to the bottom, the close button is not visible. Would be great to have an option to close it immediately. It could be clicking the toolbar button again, or having a floating button to close.

Chrome M60 starts to support it, it might be nice to have this visualized as well:

• https://github.com/wicg/paint-timing#definition
• https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics#first_paint_and_fist_contentful_paint

Rather than forcing the user to wait for the onLoad event etc it would be possible to use PerformanceObserver to react to entries becoming available.

No support in IE and Safari yet: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver

Count only time on the wire - do not double count simultaneous parallel requests

do you have plans for translating this into another languages?
I would be interested in having it in Italian...

List of median TTFB/Download time per domain to highlight slow 3rd parties etc.

Add more details about request e.g. init type/file type start/end etc.

There is a domContentLoaded mark in the navigation timing, but it would be good to calculate it relative to domLoading.

ref: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp

var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;

alone the same line as #42, but I believe exporting the results to PDF or Excel is much more difficult than exporting as JSON, hence a new issue request.

So, beside dumping to console as table, please provide an option to dump to console as JSON.

Thanks

@RichardDillman:
Request: that your z-index be 6mill+ to account for sites w/ ads per the IAB regs at http://goo.gl/xurwua

Some sites/web apps disable body overflow by default. This won't allow to scroll the overflowing results. SVGOMG for reference.

Need a way to export the results to PDF or Excel

Hello,

Thank you for creating such a handy tool. Does it support a page that has more than 150 requests?

Thank,
John

Based on my research, ssl/tls value is the diff of connectEnd-secureConnectionStart. Looks like in this repo, it is calculated using connectStart.

	if(perfTimingCalc.secureConnectionStart){
		perfTimingCalc.blocks.push(waterfall.timeBlock("SSL", perfTimingCalc.connectStart, perfTimingCalc.secureConnectionStart, "block-ssl"));
	}

Let me know your thoughts. I am open to submitting a PR if this needs to be fixed.

A lot of colour choices are somewhat arbitrary. Following the WebPageTest pallet will make it more intuitive:

Example: http://www.webpagetest.org/result/150128_4G_11A8/

Firefox bug with writing-mode: tb; for text SVG nodes.

They don't align correctly and the mouseover is just triggered for the regular horizontal area.

correctly

Hi, would it be possible at some point to add a horizontal scrollbar to the Resource Timing container? I am experiencing some issues with seeing the full picture with certain website applications that loads a lot of content hence the viewport of the Resource Timing container need some "stretching" to be able to see the end of the performance timeline.

https://prnt.sc/VAA39st6IFOM

Thank you for all the work put into this repo already at this time. Superb. Keep up the good work.

Hi,
is the add on still available for firefox? The links are broken and I could not find it.
Thank you

When would performance-bookmarklet start its data collection?
Would it always start from the very beginning?
Is it possible to let performance-bookmarklet to, "forget the past, start data collection from now"?

Thanks

I just tried your bookmarklet on FF35 and it just opens a white layer on top of the current page (see screenshot).

The devtools itself contain some console.table() formatted data, but the bookmarklet does not show up like the screenshots of your readme explain.

Is Firefox not supported? Are there any statements regarding browser support?