Detect elements with high CLS of a Web (Core Web Vitals)

The CLS Cumulative Layout Shift,or unexpected movement of content, is a user-centric metric to measure visual stability, and that helps to see how many users experience changes in the layout of the web unexpectedly.

Within Web Development,the CLS is a measure offered by Google’s Page Speed and should be less than 0.1. The lower it is, the more stable the load.

But like this blog it’s development. Let’s see, because there are times when Page Speed,tells us a total measurement, but we want to detect where this problem is caused. Many times, it is not as intuitive as we are usually told in many examples.

If we use Google Chrome, in the console, we can activate the option
Layout Shift Regions, which colors the rendering and shows us the points on the web that cause a larger CLS.

1. Three points
2. Run Command > Show Rendering
3. Activate Layout Shift Regions

And to have even more information, in the console tab, we can implement this code, which will give us exact values of the elements that cause such problems.

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});

Once you run this routine, it gives you the different HTML elements that cause this problem.

This is usually solved with CSS in the elements that create that problem.