about web vital score

[iwindfree]

Thanks for providing good open source. I added continuity plugin to try to measure WebVitalScore. I am using page load beacon to get lcp, fid values. but cls seems to occur even after the page is loaded, so I set the afterOnload option to true in the continuity plugin option and trying to get the value from the 'interaction' beacon or page unload beacon. I wonder if this method is correct? At the time of page load, cls was not measured a lot, so I thought about this method. Additionally, the http.initiator value is empty in the page unload beacon, but I wonder if this is correct.

[ceckoslab]

Hello @iwindfree

I have few questions:

1. What version of Boomerang JS do you use?
2. Could you share an example Beacon payload that you send to your system that collects Boomerang metrics?
3. Do you have the a public instance website where you run Boomerang? It will be great if we can take a look.
4. Are you sure that CLS is the metric that doesn't get reported? A page often experiences CLS before the page load. Could it be that you mean FID?

One way to try to find out what's happening you plug this script on your page via https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en and to observe what's happening in the browser's console:

let clsValue = 0;
let clsEntries = [];

let sessionValue = 0;
let sessionEntries = [];

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // Only count layout shifts without recent user input.
    if (!entry.hadRecentInput) {
      const firstSessionEntry = sessionEntries[0];
      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

      // If the entry occurred less than 1 second after the previous entry and
      // less than 5 seconds after the first entry in the session, include the
      // entry in the current session. Otherwise, start a new session.
      if (sessionValue &&
          entry.startTime - lastSessionEntry.startTime < 1000 &&
          entry.startTime - firstSessionEntry.startTime < 5000) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }

      // If the current session value is larger than the current CLS value,
      // update CLS and the entries contributing to it.
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = sessionEntries;

        // Log the updated value (and its entries) to the console.
        console.log('CLS:', clsValue, clsEntries)
      }
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Script take from: https://web.dev/cls/