List slow-loading resources (√ Chrome + √ Firefox; Safari partial)

slow-resources.js

// Anything over this threshold is considered slow
const THRESHOLD = 600; // 600 ms

// User-friendly number rounding
function round(value) {
  if (!this.format) {
    this.intl = new Intl.NumberFormat(navigator.language, {
      maximumFractionDigits: 2,
    });
    this.format = this.intl.format.bind(this.intl);
  }

  return this.format(value);
}

// shorten local resource URLs
let originFriendly = url => url.replace(location.origin, '');

console.table(
  window.performance
    .getEntriesByType('resource')

    // filter just those above the threshold
    .filter(item => item.duration > THRESHOLD)

    // prepare tabular data
    .reduce((acc, item) => {
      const resource = originFriendly(item.name);
      const duration = round(item.duration);
      const size = round(item.transferSize / 1024);

      acc[`[${item.initiatorType}] ${resource}`] = `${duration} ms ${size} KB`;
      return acc;
    }, {})
);