cls.js

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) {  }})();

fid.js

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});

lcp.js

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});