New Perspectives On Web Design

By Tim Kadlec CHAPTER 4

as load time) visible on every page load. Etsy, long known for its incredible
dedication to performance, uses this approach, an idea originally discussed
by Jeff Atwood^20.
Etsy displays the render time (calculated by the server) on the page,
but with the introduction of the navigation timing API, you can easily
include page load time with a couple lines of simple JavaScript. The snip-
pet below would output the perceived load time to the console, but you
could easily modify it to output to an element in your document to make
it easily visible.

function getLoadTime() {
var now = new Date().getTime();

// Get the performance object
window.performance = window.performance || window.mozPerformance
|| window.msPerformance || window.webkitPerformance || {};
var timing = performance.timing || {};
if (timing) {
var load_time = now - timing.navigationStart;
console.log('Load time: ' + load_time + 'ms');
}
}

window.onload = function() {
getLoadTime();
}

It may seem like a minor thing, but displaying the load time for every
page in the top-right corner can have a big impact on how your team views
performance optimization. Load time becomes a point of comparison and
conversation — and if a page loads slowly, that fact will be staring them
straight in the face each time they work on it.

20 http://smashed.by/perf-feature