Debug and optimize your Cumulative Layout Shift (CLS) in under 1 minute

Summary: Optimizing your CLS can be difficult to estimate which element is shifting. This is because there are many different viewports. For example, one device may suffer from a shift where the other does not. With these insights, you will be ready within 1 minute and can start optimizing one of the three Core Web Vitals.

  • by Jordy Scholing
  • Published
  • Reading time ± 2 minutes
  • CLS
Debug and optimize your Cumulative Layout Shift (CLS) in under 1 minute

Optimize Cumulative Layout Shift

When customers start monitoring Core Web Vitals and eventually optimizing it, we first give them a brief introduction. During this introduction, we like to show them how this choice will make their optimizations a lot more pleasant. Many websites come to us because they have a Cumulative Layout Shift (CLS) problem that they cannot place. But with RUMvision, within minutes you'll have the insights you've been looking for all along.

Debugging your CLS

In the video we show you how you can do it should you use RUMvision, this is then also a use-case we created based on customer compliments. With filters and the right Core Web Vitals data, you can see the following in RUMvision:

  • On which template the CLS appears
  • Which specific element causes a shift
  • Whether it is a problem on each device (viewport)

With these insights, you no longer have to guess or spend a very long time debugging to spot your CLS problem. Once the problem is found, you can work on optimizing your Cumulative Layout Shift (CLS) using your knowledge or recommendations from us.

Why are these insights so valuable?

The important thing to know is that this data consists of only your visitors. So if a certain element indicates a high value then there have been users who have experienced a CLS. When you start debugging yourself you often base it on yourself, but in reality, you have thousands of visitors, each with their conditions (device, internet, viewport, are they unique or returning, etc.).

Cumulative Layout Shift (CLS) histogram showing that not every user has the same amount of shifting

Every user has their own CLS experience

When we know that an element causes a shift for your real visitors, we can also see how much the CLS value is per user. For example, in the histogram above you can see that the majority have a CLS value of 0.4, but there are also better and worse experiences. Since you know it's a problem for the majority, you can decide to put it on your roadmap soon, so you'll start passing the Core Web Vitals again.

The takeaway of this use case

Very simple. If you want to save time and be sure you are going to optimize the CLS the right way, you need these insights. When you have optimized the CLS, you can also see within a few hours whether the improvement has had an effect, that way you don't have to wait 28 days for CrUX data from Google.

This way, our users have more time for other things and do not have to frustrate themselves with the CLS, which is generally a tricky metric to find and solve. So want to save time? Then be sure to get in touch, as we have dozens of other ways to make optimizing Core Web Vitals faster and more fun.

Share blog post