Why is onCLS firing late

[adardesign]

when registering onCLS onINP onLCP then registering a visibilitychange what happens is that all metrics are available at this point but CLS is delayed

See:

  const script = document.createElement("script");
  script.src = "https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js";
  script.onload = function () {
    const queue = new Set();
    function addToQueue(metric) {
      queue.add(metric);
    }

    window.flushQueue = () => {
      if (queue.size > 0) {
        // Note: JSON.stringify will likely include more data than you need.
        const queueData = Object.assign(...Array.from(queue, (v) => ({ [v.name]: v.value })));
        queueData.url = window.location.href.split("#")[0];
        queueData.referrer = document.referrer;
        queueData.deviceType = /Android|webOS|iPhone|iPad/i.test(navigator.userAgent) ? "mobile" : "desktop";
        queueData.browserName =  "// browserName()";
        queueData.connectionType = navigator.connection ? navigator.connection.effectiveType : "unknown";
        queueData.interactionCount = performance.interactionCount;

        const body = JSON.stringify(queueData);

        (navigator.sendBeacon && navigator.sendBeacon("/beacon/perf/navigation", body)) || fetch("/beacon/perf/navigation", { body, method: "POST", keepalive: true });
        totalCLS = 0; // reset CLS
        queue.clear();
      }
    };

    webVitals.onCLS(addToQueue);
    webVitals.onFID(addToQueue);
    webVitals.onLCP(addToQueue);
    webVitals.onTTFB(addToQueue);
    webVitals.onINP(addToQueue);

    addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") {
        flushQueue();
      }
    });
      };
  document.head.appendChild(script);

[tunetheweb]

Can you explain more what you mean? I tested above code and it's correctly registering CLS on visibility change.