WordPress at Your Fingertips

Javascript: HTML Document Load Performance Measure

The code below displays in the browser console, measuring the load speed of different parts of HTML document.

Add the following code to the HEAD part of the HTML document:

<script>
(function(){
	const names = {
		start : 'Time origin',
		head : 'HTML HEAD start',
		DOMStart : 'DOMContentLoaded Start',
		DOM : 'DOMContentLoaded Operations',
		DOMEnd : 'DOMContentLoaded End',
		DOM_WIN : 'DOMContentLoaded End - Window Load Start',
		WINStart : 'Window Load Start',
		WINEnd : 'Window Load End',
	}

	const timer = {}
	timer[names.start] = 0
	timer[names.head] = performance.now()

	window.addEventListener( 'DOMContentLoaded', () => {

		timer[names.DOMStart] = performance.now()

		setTimeout( () => {
			timer[ names.DOMEnd ] = performance.now()
			timer[ names.DOM ] = timer[ names.DOMEnd ] - timer[names.DOMStart]
		}, 0 )
	} )

	window.addEventListener( 'load', () => {
		timer[names.WINStart] = performance.now()
		timer[names.DOM_WIN] = timer[names.WINStart] - timer[names.DOMEnd]

		setTimeout( () => {
			timer[names.WINEnd] = performance.now()
		}, 0 )

		setTimeout( () => {

			const table = {}
			for( let key in timer ){
				table[ key ] = { ms: Math.round( timer[ key ] ) }
			}

			console.table( table )

		}, 1000 )
	} )

})()
</script>

Now, when you go to browser console you will see something like this:

Just the same timers you can see at the bottom of Network tab of DevTools in Chrome:

No comments
    Log In