Code Quiz

Measuring CLS with PerformanceObserver

Spot the bug in a Cumulative Layout Shift measurement using the Layout Instability API.

Codejavascript

let clsValue = 0;

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Accumulate every layout-shift value
    clsValue += entry.value;
  }
  console.log('Current CLS:', clsValue);
});

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

This CLS tracker reports values that are too high. What is the bug?

Next →Core Web Vitals: LCP, CLS, INP