Tutorial:
How to build a handy performance bookmarklet

Slides

Full:
http://lab.michaelmrowetz.com/bookmarklet-tutorial

Short:
http://goo.gl/TK44i6

A bit about me

Sr. Frontend Dev at Nurun (soon to be RazorFish)

Karlsruhe > Sydney > Galway > Seoul > Toronto

@MicMro

https://github.com/micmro

Bookmarklets

DOM Monster!

https://mir.aculo.us/dom-monster/

PerfMap

https://github.com/zeman/perfmap

Waterfall

https://github.com/andydavies/waterfall

Performance-Bookmarklet

https://github.com/micmro/performance-bookmarklet

How to get started?

Bookmark boilerplate


javascript:(function(){
	var el = document.createElement('script');
	el.src = 'http://lab.michaelmrowetz.com/tutorial/test.js';
	document.getElementsByTagName('body')[0].appendChild(el);
})();
						

*needs to be inlined

Installing the bookmarklet

Via Bookmark Manager

Navigation, User and
Resource Timing API

Navigation Timing API

http://www.w3.org/TR/navigation-timing

http://caniuse.com/#feat=nav-timing

Examples

performance.timing


var fullNetwork = performance.timing.responseEnd - performance.timing.navigationStart;
var connectionTime = performance.timing.responseStart - performance.timing.navigationStart;

alert("fullNetwork: " + fullNetwork + "ms\nconnectionTime: " + connectionTime + "ms");
						

User Timing API


//set start mark
performance.mark("startTask");

//task
setTimeout(function(){
	//set end marker
	performance.mark("endTask");

	//measure elapsed time
	performance.measure("TaskTotal", "startTask", "endTask");

	var duration = performance.getEntriesByName("TaskTotal")[0].duration;
	alert("total: " + duration + "ms");
}, 500);
							

http://www.w3.org/TR/user-timing

http://caniuse.com/#feat=user-timing

Resource Timing API

http://www.w3.org/TR/resource-timing

http://caniuse.com/#feat=resource-timing

Examples


var resources = performance.getEntriesByType("resource");
console.table(resources.map(function(resource){
    return {
	    "name" : resource.name,
	    "total" : Math.round(resource.duration) + "ms"
    }
}));
						

Where to go from here?

Ideas

  • Service-level agreement quick checks
  • New visualizations
  • Performance Snooping
  • Meeting helper

Browser Extension/Addon

Thanks!

Any questions?