Created
March 17, 2022 13:23
-
-
Save carlosvillu/c0d67a7a461be299b26610a9953bb497 to your computer and use it in GitHub Desktop.
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
javascript:(function(){ try { let cls = 0; const canvas = document.createElement('canvas'); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.position = 'absolute'; canvas.style.left = 0; canvas.style.top = 0; canvas.style.zIndex = 100000; canvas.style.pointerEvents = 'none'; document.body.appendChild(canvas); const context = canvas.getContext('2d'); const po = new PerformanceObserver((list) => { canvas.style.transition = 'opacity 0s'; canvas.style.opacity = 1; context.clearRect(0, 0, canvas.width, canvas.height); for (const entry of list.getEntries()) { if (!entry.hadRecentInput && entry.value >= 0.0025) { cls += entry.value; let consoleGroup = `%cTotal CLS value: ${cls}`; let styles = ''; if (cls >= 0.1) { styles = 'color: red;'; } console.group(consoleGroup, styles); console.log(`Current LS value: ${entry.value}`); let consoleSubGroup = 'List of source elements:'; console.group(consoleSubGroup); for (const source of entry.sources) { context.strokeStyle = 'yellow'; context.strokeRect(source.previousRect.x, source.previousRect.y, source.previousRect.width, source.previousRect.height); context.strokeStyle = 'red'; context.strokeRect(source.currentRect.x, source.currentRect.y, source.currentRect.width, source.currentRect.height); console.log(source); } console.groupEnd(consoleSubGroup); setTimeout(function() { canvas.style.transition = 'opacity 100s'; canvas.style.opacity = 0; }, 100); console.log(`Timing: ${Math.round(entry.startTime)}ms`); console.groupEnd(consoleGroup); } } }); po.observe({type: 'layout-shift', buffered: true}); } catch (e) { }})(); |
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
javascript:new PerformanceObserver((entryList)=>{ for (const entry of entryList.getEntries()) { const delay = entry.processingStart - entry.startTime; let consoleGroup = `%cFID value: ${Math.round(delay)}ms`; let styles = ''; if (delay >= 100) { styles = 'color: red;'; } console.group(consoleGroup, styles); console.log(`Event name: ${entry.name}`); console.log('Element:', entry.target); console.groupEnd(consoleGroup); }}).observe({ type: 'first-input', buffered: true}); |
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
javascript:new PerformanceObserver((entryList)=>{ for (const entry of entryList.getEntries()) { let consoleGroup = `%cLCP candidate: ${Math.round(entry.startTime)}ms`; let styles = ''; if (entry.startTime >= 2500) { styles = 'color: red;'; } console.group(consoleGroup, styles); console.log('Element:', entry.element); console.groupEnd(consoleGroup); }}).observe({ type: 'largest-contentful-paint', buffered: true}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment