Created
September 13, 2019 11:28
-
-
Save grgur/7e8d2522b1065add0f1ff7824017f4b6 to your computer and use it in GitHub Desktop.
List slow-loading resources (√ Chrome + √ Firefox; Safari partial)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
}, {}) | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment