Skip to content

Instantly share code, notes, and snippets.

@iainmcgin
Created December 11, 2013 16:47
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iainmcgin/7914048 to your computer and use it in GitHub Desktop.
Save iainmcgin/7914048 to your computer and use it in GitHub Desktop.
Example of using the W3C Resource Timing API to display the resource timing information of +1 buttons. This code can be pasted into the Javascript console in Chrome on any page.
(function() {
// request PerformanceResourceTiming info for all resources on the page
var resources = window.performance.getEntriesByType('resource');
// filter all resources to just +1 button iframes with timing information
var p1Resources = resources.filter(function(rtInfo) {
return rtInfo.name.indexOf('_/+1/fastbutton') != -1 &&
rtInfo.responseStart != 0;
});
// describes the timing information for a resource
var rtReport = function(rtInfo) {
var preRequestTime = Math.round(rtInfo.requestStart - rtInfo.startTime);
var requestTime = Math.round(rtInfo.responseStart - rtInfo.requestStart);
var responseTime = Math.round(rtInfo.responseEnd - rtInfo.responseStart);
var duration = Math.round(rtInfo.duration);
return 'Pre-Request Time: ' + preRequestTime + 'ms\n' +
'Request Time: ' + requestTime + 'ms\n' +
'Response Time: ' + responseTime + 'ms\n' +
'Total Duration: ' + duration + 'ms\n';
};
// report the timing for the first +1 button in the list, if one exists
if (p1Resources.length > 0) {
alert('First +1 button timing information:\n\n' + rtReport(p1Resources[0]));
} else {
alert('no widgets with resource timing information found');
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment