Cumulative Layout Shift: How to Understand & Optimize User Experiences

A low CLS score means your layout isn't shifting much, while a higher score indicates a lot of shifting. Ideally, you want to achieve a CLS score of 0.1 or less; a score of 0.1 to 0.25 means you need to make improvements. CLS scores above 0.25 indicate that your website layout is shifting significantly, meaning you must make significant changes to reduce layout shifts. We'll discuss how to measure and improve these scores later on.

When several layout shifts happen within 1 second or less of each other, it's known as a session window. Google Chrome uses these session windows to measure CLS, which works differently than traditional CLS scores. The maximum total length of a session window is 5 seconds, and the session with the highest cumulative layout shift will be reported to Chrome. Understanding both session windows and traditional CLS scores makes dealing with your CLS issues easier.

Additionally, it's important to recognize the differences between an unexpected and expected layout shift. Expected layout shifts are often triggered by user interactions and are a naturally-occurring part of the site, so they won't lead to a poor CLS score. Examples of this include dynamic content and responsive images. This differs from an unexpected layout shift that's a result of an unstable element.

Is cumulative layout shift important?

Cumulative layout shift is an essential metric when it comes to web design. Maintaining a good CLS score improves the user experience and helps drive more meaningful traffic to your website. People gravitate toward websites that operate correctly and are easy to use, avoiding sites that don't function properly or load slowly. A low CLS score means your website loads without too much layout shift, so you don't have to worry about visitors getting frustrated and going to another website.

Avoiding CLS issues is especially important if you have ads on your website. Users don't know when your website layout will shift, and it could happen right as they're about to click a link on your site. As the layout shifts, they might accidentally click an ad and load a third-party website they're not interested in.

When creating a website, it's important to build with the user experience in mind and design your website for convenience and functionality.

What influences a cumulative layout shift score to change?

CLS difficulties can be tough to solve because there are several potential causes. For example, something might be wrong with your website code or there's an issue with fonts or animations. In some cases, poor CLS is caused by something as simple as a bad internet connection that leads to slow loading times.

There are countless code issues that can lead to an unstable element that causes a high CLS score. For instance, your website might shift when an image loads if you don't set the proper width and height in your image tags. Specifying the width and height allows the browser to reserve space for the same aspect ratio as the image, which means the rest of the content doesn't shift when it loads. Ads and embeds that don't have space reserved for them can also cause CLS.

Using animations and web fonts requires a little extra work if you want to avoid CLS. When adding animations, it's important to use the right CSS properties to ensure you're not causing a layout shift. When it comes to web fonts, choosing the correct fallback font is a key part of minimizing layout shifts as web fonts load.

If someone has a bad internet connection or you're using slow-loading images, videos, or ads, that can also result in high CLS scores. This is a common issue for online stores that have several visual elements. Any slow-loading features will likely cause a layout shift, especially if they're not properly coded.

Understanding how unstable elements affect CLS and how to fix cumulative layout shifts can help you build a better website. Your website strategy should include a plan to measure and improve CLS scores and other core web vitals.

How to measure CLS

Fortunately, measuring CLS is pretty straightforward. There are several tools you can use to measure and monitor your CLS scores, and you can also calculate these scores through the Google Chrome User Experience Report. That said, it's also important to understand what certain CLS scores indicate and what you should aim for to optimize your website.

The traditional CLS score is a measurement of how much of your site layout shifts throughout the life of the page. Your score, whether it's a 0.1 or a 0.25, is a percentage representation of how much space changes in your layout. A 0.1 CLS score means that 10% of visible content shifted, while a 0.25 means 25% of visible content shifted. Every website will experience layout shifts, so don't be alarmed if your score is nearing 0.1.

As mentioned earlier, Google Chrome uses session windows to measure CLS rather than measuring layout shifts throughout the life of the webpage. You can use different tools like Google's Chrome User Experience Report and Lighthouse to monitor your CLS scores and see what you need to improve. These scores measure your CLS in session windows, which occur when layouts shift within a second of each other. Each session window has a maximum possible length of 5 seconds.

Taking advantage of traditional CLS scores and session window scores can help you get a thorough overview of your website in terms of cumulative layout shifts.

Optimizing your CLS score

Once you've figured out your CLS score, you can plan what you need to do next.

You likely have nothing to worry about if your CLS score is 0.1 or lower.

Scores of 0.1 to 0.2 are a warning sign, while scores of 0.25 or higher indicate a major issue. If your CLS score is above 0.1, here's what you can do to optimize your score:

• Start by determining which parts of your website load slowly, whether it's an ad, a video, or a banner image.
• You can check the HTML and CSS code to ensure a defined height and width when you've identified the culprits. The same general idea applies to CLS caused by web fonts and animations, but the specific code you'll need to add will be somewhat different.

Fixing page load times can help you avoid performance issues while improving the user experience. Consumers don't want to sit around and wait for a website to load, so make sure all the elements on your page are functional within 2 seconds. The longer your pages take, the more likely people are to visit another website.

Improve your CLS to boost user experience

Cumulative layout shift is one of several core web vitals you must focus on to build a great website. People want to use websites that load quickly, display properly, and work how they're supposed to, so fixing HTML and CSS code issues is a key part of UX design.

With Mailchimp, you can get the help you need to build a functional and professional website. Our website and landing page tools make it easy to create a custom website, plus we've got marketing and automation tools to drive traffic to your site.