As a performance officer, I recently watched a presentation by Lara Callender Swanson about how Etsy moved towards a culture of performance and mobile web by educating, incentivizing and empowering everyone who works at Etsy.
Inspired by a repo on github and StackExchange‘s Miniprofiler, I’ve created a very simple script to display Navigation Timing stats at the top of a web page.
It’s important to understand that Navigation Timing data is very similar to network stats in developer tools.
Can I Use …?
Navigation Timing API is now supported by all major browsers (Can I use …?). Google Analytics and RUM services use it since a long time ago. In case it’s not supported by your browser, an error message will be displayed.
No message => don’t hesitate to create an issue on github.
This is maybe the most interesting part. Developer tools are not available on mobile/tablet version so you don’t have any chance to evaluate page load time and to explain why it may be slow.
Here is an example on my stackoverflow profile:
To conclude, don’t forget that Performance is a feature! Displaying page load time on each page and to everyone is a great chance to detect performance issues early. Does a page violate your SLA? I think it’s now a little easier with this script.