Calculative Cumulative Layout Shift(CLS) performance metric

cumulative-layout-shift.md

Cumulative layout shift (CLS)

Using web-vitals npm package

import {getCLS} from 'web-vitals';
getCLS(console.log);

Devtools snippet to measure CLS

try {
  let cumulativeLayoutShiftScore = 0;
  const observer = new PerformanceObserver(list => {
    for(const entry of list.getEntries()){
      if(!entry.hadRecentInput){
        cumulativeLayoutShiftScore += entry.value;
      }
    }
  });

  observer.observe({type: 'layout-shift', buffered: true});

  document.addEventListener('visibilitychange', () => {
    if(document.visibilityState === 'hidden'){
      observer.takeRecords();
      observer.disconnect();
      
      console.log(`CLS: ${cumulativeLayoutShiftScore}`);
    }
  })

} catch(e) {
  console.log(`Browser doesn't support this API`);
}