Displays total time spent loading external assets in the client

external-requests-time.js

/**
 * From Google Developers; Collect all third party requests using the Performance API.
 * Source: https://developers.google.com/web/updates/2015/07/measuring-performance-in-a-service-worker
 * 
 */
 
 var getThirdPartyRequests = function() {
  var thirdPartyRequests = [];
  var requests = window.performance.getEntriesByType("resource");
  var currentHost = window.location.host

  for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
    var request = requests[requestIdx];
    var url = new URL(request.name);
    var host = url.host;

    if(host != currentHost) {
      thirdPartyRequests.push(request);
    }
  }
  
  return thirdPartyRequests;
};

// Get them into a variable
var externalRequests = getThirdPartyRequests();

// Get total time in milliseconds
var totalTime = externalRequests.map(function(i) {
  return i.duration;
}).reduce(function(total, sum) {
  return total + sum; 
}, 0);

console.log('Total time spent downloading external assets:', totalTime, 'ms');