Updated Core Web Vitals Bookmarklet (https://web.dev/evolving-cls/, https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver, https://tamethebots.com/blog-n-bits/evolving-cls)

UPDATED_Core_Web_Vitals_Bookmarklet.js

javascript:void%20function(){var%20b=Number.NEGATIVE_INFINITY;function%20a({name:a,delta:b,verdict:c}){var%20d,d;null==(d=document.getElementById(%22webVitalsHolder%22))%26%26((d=document.createElement(%22div%22)).id=%22webVitalsHolder%22,d.style.position=%22fixed%22,d.style.bottom=0,d.style.left=0,d.style.margin=%225px%22,d.style.padding=%225px%22,d.style.fontFamily=%22monospace%22,d.style.fontSize=%221.5rem%22,d.style.backgroundColor=%22%23fff%22,d.style.color=%22%23000%22,d.style.border=%221px%20solid%20%23000%22,d.style.borderRadius=%220.5rem%22,d.style.boxShadow=%220%2025px%2050px%20-12px%20rgba(0,0,0,.25)%22,d.style.zIndex=%22999999%22,document.body.appendChild(d));var%20e=document.getElementById(%22webVital-%22+a);if(null!=e)0===c%3Fe.style.color=%22%230cce6b%22:1===c%3Fe.style.color=%22%23ffa400%22:2===c%26%26(e.style.color=%22%23ff4e42%22),e.innerText=`%20${a}:%20${b}`;else{var%20f=document.createElement(%22span%22);f.id=%22webVital-%22+a,0===c%3Ff.style.color=%22%230cce6b%22:1===c%3Ff.style.color=%22%23ffa400%22:2===c%26%26(f.style.color=%22%23ff4e42%22),f.innerText=`%20${a}:%20${b}`,d.appendChild(f)}}let%20c=0,d=0,e=b,f=b;var%20g=0,h=0;a({name:%22CLS%20(new)%22,delta:c.toFixed(4),verdict:0});var%20i=%22hidden%22===document.visibilityState%3F0:1/0;document.addEventListener(%22visibilitychange%22,a=%3E{i=Math.min(i,a.timeStamp)},{once:!0}),new%20PerformanceObserver(b=%3E{for(const%20h%20of%20b.getEntries())if(!h.hadRecentInput){(5e3%3Ch.startTime-e||1e3%3Ch.startTime-f)%26%26(e=h.startTime,d=0),f=h.startTime,d+=h.value,c=Math.max(c,d);var%20g=0;.1%3Cc%26%26.25%3E=c%26%26(g=1),.25%3Cc%26%26(g=2),a({name:%22CLS%20(new)%22,delta:c.toFixed(4),verdict:g}),console.log(%22Current%20MAX-session-gap1s-limit5s%20value:%22,c,h)}}).observe({type:%22layout-shift%22,buffered:!0}),new%20PerformanceObserver(b=%3E{b.getEntries().forEach(b=%3E{0===(g=parseFloat(b.renderTime))%26%26(g=parseFloat(b.loadTime)),[].forEach.call(document.querySelectorAll(%22.ttb-lcp-candidate%22),function(a){a.classList.remove(%22ttb-lcp-candidate%22)}),console.log(%22LCP:%22,b),b.element%26%26b.element.classList.add(%22ttb-lcp-candidate%22);var%20c=0;2500%3Cg%26%264e3%3E=g%26%26(c=1),4e3%3Cg%26%26(c=2),a({name:%22LCP%22,delta:`${(g/1e3).toFixed(2)}%20s`,verdict:c})})}).observe({type:%22largest-contentful-paint%22,buffered:!0}),new%20PerformanceObserver(b=%3E{b.getEntries().forEach(b=%3E{h=parseFloat(b.processingStart-b.startTime),console.log(%22FID:%22,b);var%20c=0;100%3Ch%26%26300%3E=h%26%26(c=1),300%3Ch%26%26(c=2),a({name:%22FID%22,delta:`${h.toFixed(4)}%20Ms`,verdict:c})})}).observe({type:%22first-input%22,buffered:!0})}();

UPDATED_Core_Web_Vitals_Bookmarklet_readable.js

{
  var b = Number.NEGATIVE_INFINITY;

  function a({ name: a, delta: b, verdict: c }) {
    var d, d;
    null == (d = document.getElementById("webVitalsHolder")) &&
      (((d = document.createElement("div")).id = "webVitalsHolder"),
      (d.style.position = "fixed"),
      (d.style.bottom = 0),
      (d.style.left = 0),
      (d.style.margin = "5px"),
      (d.style.padding = "5px"),
      (d.style.fontFamily = "monospace"),
      (d.style.fontSize = "1.5rem"),
      (d.style.backgroundColor = "#fff"),
      (d.style.color = "#000"),
      (d.style.border = "1px solid #000"),
      (d.style.borderRadius = "0.5rem"),
      (d.style.boxShadow = "0 25px 50px -12px rgba(0,0,0,.25)"),
      (d.style.zIndex = "999999"),
      document.body.appendChild(d));
    var e = document.getElementById("webVital-" + a);
    if (null != e)
      0 === c
        ? (e.style.color = "#0cce6b")
        : 1 === c
        ? (e.style.color = "#ffa400")
        : 2 === c && (e.style.color = "#ff4e42"),
        (e.innerText = ` ${a}: ${b}`);
    else {
      var f = document.createElement("span");
      (f.id = "webVital-" + a),
        0 === c
          ? (f.style.color = "#0cce6b")
          : 1 === c
          ? (f.style.color = "#ffa400")
          : 2 === c && (f.style.color = "#ff4e42"),
        (f.innerText = ` ${a}: ${b}`),
        d.appendChild(f);
    }
  }
  let c = 0,
    d = 0,
    e = b,
    f = b;
  var g = 0,
    h = 0;
  a({
    name: "CLS (new)",
    delta: c.toFixed(4),
    verdict: 0,
  });
  var i = "hidden" === document.visibilityState ? 0 : 1 / 0;
  document.addEventListener(
    "visibilitychange",
    (a) => {
      i = Math.min(i, a.timeStamp);
    },
    {
      once: !0,
    }
  ),
    new PerformanceObserver((b) => {
      for (const h of b.getEntries())
        if (!h.hadRecentInput) {
          (5e3 < h.startTime - e || 1e3 < h.startTime - f) &&
            ((e = h.startTime), (d = 0)),
            (f = h.startTime),
            (d += h.value),
            (c = Math.max(c, d));
          var g = 0;
          0.1 < c && 0.25 >= c && (g = 1),
            0.25 < c && (g = 2),
            a({
              name: "CLS (new)",
              delta: c.toFixed(4),
              verdict: g,
            }),
            console.log("Current MAX-session-gap1s-limit5s value:", c, h);
        }
    }).observe({
      type: "layout-shift",
      buffered: !0,
    }),
    new PerformanceObserver((b) => {
      b.getEntries().forEach((b) => {
        0 === (g = parseFloat(b.renderTime)) && (g = parseFloat(b.loadTime)),
          [].forEach.call(
            document.querySelectorAll(".ttb-lcp-candidate"),
            function (a) {
              a.classList.remove("ttb-lcp-candidate");
            }
          ),
          console.log("LCP:", b),
          b.element && b.element.classList.add("ttb-lcp-candidate");
        var c = 0;
        2500 < g && 4e3 >= g && (c = 1),
          4e3 < g && (c = 2),
          a({
            name: "LCP",
            delta: `${(g / 1e3).toFixed(2)} s`,
            verdict: c,
          });
      });
    }).observe({
      type: "largest-contentful-paint",
      buffered: !0,
    }),
    new PerformanceObserver((b) => {
      b.getEntries().forEach((b) => {
        (h = parseFloat(b.processingStart - b.startTime)),
          console.log("FID:", b);
        var c = 0;
        100 < h && 300 >= h && (c = 1),
          300 < h && (c = 2),
          a({
            name: "FID",
            delta: `${h.toFixed(4)} Ms`,
            verdict: c,
          });
      });
    }).observe({
      type: "first-input",
      buffered: !0,
    });
}