Snippets for LSN using PerformanceObserver

CLS, from web.dev article

{
  let cls = 0;

  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (!entry.hadRecentInput) {
        cls += entry.value;
        console.log('Current CLS value:', cls, entry);
      }
    }
  }).observe({type: 'layout-shift', buffered: true});
}

avg-session-gap5s

{
  let cls = 0, count = 0, prevTs = Number.NEGATIVE_INFINITY;

  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (entry.hadRecentInput) continue;
      if (entry.startTime - prevTs > 5000) count++;
      prevTs = entry.startTime;
      cls += entry.value;
      console.log('Current avg-session-gap5s value:', cls/count, entry);
    }
  }).observe({type: 'layout-shift', buffered: true});
}

max-session-gap1s

{
  let max = 0, curr = 0, prevTs = Number.NEGATIVE_INFINITY;

  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (entry.hadRecentInput) continue;
      if (entry.startTime - prevTs > 1000) curr = 0;
      prevTs = entry.startTime;
      curr += entry.value;
      max = Math.max(max, curr);
      console.log('Current MAX-session-gap1s value:', max, entry);
    }
  }).observe({type: 'layout-shift', buffered: true});
}

max-session-gap1s-limit5s

{
  let max = 0, curr = 0, firstTs = Number.NEGATIVE_INFINITY, prevTs = Number.NEGATIVE_INFINITY;

  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (entry.hadRecentInput) continue;
      if (entry.startTime - firstTs > 5000 || entry.startTime - prevTs > 1000) {
        firstTs = entry.startTime;
        curr = 0;
      }
      prevTs = entry.startTime;
      curr += entry.value;
      max = Math.max(max, curr);
      console.log('Current MAX-session-gap1s-limit5s value:', max, entry);
    }
  }).observe({type: 'layout-shift', buffered: true});
}

max-sliding-1s

{
  let max = 0, curr = 0, entries = []; 

  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (entry.hadRecentInput) continue;
      while (entries.length && entry.startTime - entries[0].startTime > 1000) curr -= entries.shift().value;
      entries.push(entry);
      curr += entry.value;
      max = Math.max(max, curr);
      console.log('Current MAX-sliding-1s value:', max, entry);
    }
  }).observe({type: 'layout-shift', buffered: true});
}

max-sliding-300ms

{
  let max = 0, curr = 0, entries = []; 

  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (entry.hadRecentInput) continue;
      while (entries.length && entry.startTime - entries[0].startTime > 300) curr -= entries.shift().value;
      entries.push(entry);
      curr += entry.value;
      max = Math.max(max, curr);
      console.log('Current MAX-sliding-300ms value:', max, entry);
    }
  }).observe({type: 'layout-shift', buffered: true});
}