Semi-Detailed page load performance timings

performance.js

// http://w3c-test.org/webperf/specs/NavigationTiming/
(function( window ) {

// Skip unsupported browsers
if ( ! window.performance || ! window.performance.timing ) {
	return;
}

// Output
function perf(){
	var timing = window.performance.timing, navigation = window.performance.navigation;

	// Separator
	console.info( "---Performance Statistics---" );

	// Show duration of each important segment
	[
		// Full length of page load, includes redirects and onload events
		[ 'Page Load', timing.navigationStart, timing.loadEventEnd ],

		// Resource loading (DNS lookups, TCP connections, resource fetching)
		[ 'Page Resources', timing.fetchStart, timing.responseEnd ],

		// Time spent waiting for dom ready events to finish
		[ 'DOM Ready Event', timing.domContentLoadedEventStart, timing.domContentLoadedEventEnd ],

		// Time spent waiting for the onload event to finish
		[ 'On Load', timing.loadEventStart, timing.loadEventEnd ],

		// Time spent in redirects
		[ 'Redirects', timing.redirectStart, timing.redirectEnd ],

		// Time spent doing DNS lookups
		[ 'DNS Lookups', timing.domainLookupStart, timing.domainLookupEnd ],

		// Time spent in TCP connections
		[ 'TCP Connections', timing.connectStart, timing.connectEnd ],

		// Time spent getting page resources
		[ 'Resources', timing.requestStart, timing.responseEnd ],

		// Time spent from the first byte downlaoded, to the last byte
		[ 'Resource Content', timing.responseStart, timing.responseEnd ],

		// Time spent rendering the DOM, before the dom ready event
		[ 'DOM Rendering', timing.domLoading, timing.domInteractive ],

		// Time spent in previous pages unload event (has to be same origin)
		[ 'Previous Unload', timing.unloadEventStart, timing.unloadEventStart ]

	].forEach(function( row ) {
		var name = row[ 0 ], length = ( row[ 2 ] || 0 ) - ( row[ 1 ] || 0 );

		if ( typeof row[ 1 ] == 'number' && typeof row[ 2 ] == 'number' ) {
			console.info( name + ':', length + 'ms' );
		}
	});

	// Navigation Info
	console.info( "-------------" );
	console.info( 'Redirects: ' +  navigation.redirectCount );
	console.info( 'How they got here: ' + (
		navigation.type == navigation.TYPE_NAVIGATE ? 'Link follow or entered in URL bar' :
		navigation.type == navigation.TYPE_RELOAD ? 'Refresh' :
		navigation.type == navigation.TYPE_BACK_FORWARD ? 'Back/Forward Button' :
		navigation.type == navigation.TYPE_RESERVED ? 'Not defined by the browser' :
		'God only knows'
	));


	// For your viewing pleasure
	console.info( "-------------" );
	console.info( 'window.performance', window.performance );
}


// Delay the perf output until after all load events finish (increase timeout limit if you do image prefetching)
window.addEventListener( 'load', function(){ setTimeout( perf, 500 ); }, false );

// If you would rather call this yourself from the console, comment out the above listener and uncomment the following line
// window.PerformanceStatistics = perf;

})( this );