Skip to content

Instantly share code, notes, and snippets.

@martinschierle
Last active September 1, 2020 17:49
Show Gist options
  • Save martinschierle/5c715f4bf1b8f7dc9d4ab2f8e41e4a65 to your computer and use it in GitHub Desktop.
Save martinschierle/5c715f4bf1b8f7dc9d4ab2f8e41e4a65 to your computer and use it in GitHub Desktop.
function getLastResource(time, regex) {
let entries = performance.getEntriesByType('resource')
let last = null;
for(let i = 0; i < entries.length; i++) {
let e = entries[i];
if(regex && !e.name.match(regex)) continue;
if(e.responseEnd < time) last = e;
}
return last;
}
let po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
//console.log(entry);
let val = entry.value;
let last = getLastResource(entry.startTime, /(woff)|(ttf)/);
if(!last) continue;
let diff = entry.startTime - last.responseEnd;
if(diff < 100) console.log(last.name + " was loaded " + diff + "ms before a layout shift with impact " + val);
}
});
po.observe({type: 'layout-shift', buffered: true});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment