Measuring cumulative layout shift score

readme.md

Measuring cumulative layout shift score

At the moment the layoutShift type is only available when the API is expliciltly enabled. If you are running Chrome 76 or newer, you can start it up via the command line with this flat set:

--enable-blink-features=LayoutInstabilityAPI

Currently this can be captured via WPT Enabling the feature in Chrome Canary

Blog post reference

cls.js

let cumulativeLayoutShiftScore = 0;

const observer = new PerformanceObserver((list) => {
  for(const entry of list.getEntries()){
    cumulativeLayoutShiftScore += entry.value;
  }
});

observer.observe({entryTypes: ['layoutShift']});

document.addEventListener('visibilitychange', () => {
  if(document.visibilityState === 'hidden'){
    observer.takeRecords();
    
    sendToAnalytics({cumulativeLayoutShiftScore});
  }
})

wpt-custom-metric.txt

Below snippet can be used in WPT custom metric

[CumulativeLayoutShift]
return new Promise(resolve => {
  var CLS = 0;
  new PerformanceObserver(list => {
    list.getEntries().forEach(entry => {
      if(entry.hadRecentInput) return;
      CLS += entry.value;
    });
    resolve(CLS);
  }).observe({type: 'layout-shift', buffered: true});
});