All You Need to Know About Cumulative Layout Shift & How to Improve it

Content:

1. What CLS score is considered suitable for a website?
2. How can you measure CLS
3. How to improve your website's CLS score
4. How to run a website audit with Netpeak Spider
5. Bottom line

Cumulative layout shift (CLS) shows how visually stable the page is as it loads. You evaluate this by looking at the size and distance of the elements that need to move. It’s one of the three Core Web Vitals metrics Google uses to measure page experience.

The CLS is essential for ensuring excellent user experience. It becomes frustrating when you try to click on a particular page element that shifts and end up clicking on something you didn't mean to. In this post, we'll cover possible ways to run a cumulative layout shift fix and how you can prevent this issue in the future using Netpeak Spider.

What CLS score is considered suitable for a website?

It's possible to calculate the CLS during the five-second window where the most shifting takes place. So, the layout shift score equals the percentage of the changed viewport multiplied by the distance an unstable element moved.

A CLS score is based on Chrome User Experience Report (or CrUX) data. You receive this data from actual Chrome users who have visited your site and shared this information. To have a CLS score of 0.1 or lower, which is considered the highest one, you'll need to get 75% of page loads.

Here are the scores that'll help you define whether your website delivers a high-quality user experience:

• Good: ≤0.1
• Needs improvement: >0.1 and ≤0.25
• Poor: >0.25

How can you measure CLS

Field and lab data are two main ways of measuring the cumulative layout shift.

You can retrieve field data from Chrome User Experience Report (CrUX) — this is data from real Chrome users who decided to share their feedback. This gives you an accurate idea of how high the CLS performance is. The field data is also what Google will measure your site on for Core Web Vitals.

At the same time, you retrieve lab data from repeatable tests with the same conditions. Although Google doesn’t use this for Core Web Vitals, it’s still helpful in testing CLS. The reason for that is the CrUX/field data you get is basically a 28-day rolling average, meaning it takes a while to see what impact the changes have brought.

Moreover, the methods and tools for measuring the cumulative layout shift score depend on whether you want to calculate it for one or several URLs.

Measuring the CLS of one URL

If you need to evaluate just one URL, try Google's PageSpeed Insights. The tool pulls page-level field data you can’t otherwise retrieve from the dataset within CrUX. It also runs lab tests based on Google Lighthouse and provides you with origin data to compare the performance of a single page to an entire website.

Measuring the CLS of multiple URLs (or an entire website)

You can access CrUX data in Google Search Console broken down into the following categories: "Good," "Needs improvement," and "Poor." There, click on one of the issues to see a breakdown of the impacted page groups. These groups consist of pages with similar values and those that probably use the same template. Make the necessary changes once within the template, which will fix the issues on all pages in the group.

How to improve your website's CLS score

If your content layout shift score is low, you'll need to optimize it by fixing issues related to images, fonts, or injected content. Below, you'll see the possible ways how to improve CLS score.

Prepare extra space for images, videos, and / or iframes

If you need to add images to your website, make sure to reserve the space so there’s no shift, and the image could fill that space. To do so, you'll need to set the images' height and width by specifying them within the <img> tag:

<img src=“dog.jpg" width="640" height="360" alt=“dog with toy" />

To properly add responsive images, use the following srcset:

<img

width="1000"

height="1000"

src="cat-1000.jpg"

srcset="cat-1000.jpg 1000w, cat-2000.jpg 2000w, cat-3000.jpg 3000w"

alt="Cat with strings" />

You’d probably want to reserve the space for dynamic content like videos and iframes, too. For that purpose, reserve the maximum space needed.

There’s also a helpful CSS property — the aspect ratio — that lets you set a dynamic width based on the screen size, after which the browser can calculate the suitable height.

Optimize the fonts

In this case, getting the font on the screen as quickly as possible and not swapping it with a new one is essential. If you upload or change a font, you'll see a noticeable shift like a Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).

Better use a system font if you can — since there’s nothing to load, there won't be any delays or changes causing CLS issues. However, if you need to use a custom font, the best way of minimizing CLS is to combine <link rel=”preload”> and font-display: optional.

Use animations that don't trigger layout changes

Some CSS property values trigger layout shifts. For example, you shouldn't animate "box-shadow," "box-sizing," "top," "left," etc. Instead, use “transform” animations that won't result in a content layout shift.

Make sure your pages are eligible for bfcache

The back/forward cache keeps pages in the browser's cache. It enables instant page loading, meaning there will be no layout shifts.

Here are some of the main tips that'll help you get rid of CLS SEO issues via bfcahce:

• Never use the unload event;
• Minimize the use of Cache-Control: no-store;
• Update stale or sensitive data after you've restored the bfcache;
• Avoid window.opener references;
• Close open connections every time before the user navigates away;
• Make sure all your pages are cacheable.

How to run a website audit with Netpeak Spider

You can check the CLS together with other Core Web Vitals via Netpeak Spider. This handy, powerful crawling tool can detect over 100 known SEO-related issues and offers useful tips to solve them.

To accelerate the process, you can add multiple URLs into the app to check them all simultaneously. Before you start the process, you'll need to integrate Google's Services into the tool so you can retrieve the necessary real-time data. Once you've entered the API, you'll access the data from PageSpeed Insights. Select the target metrics and launch the crawling.

In just a few minutes, you'll receive an interactive dashboard with the research results, the list of issues prioritized by criticality, and recommendations for solving them. Finally, you can download the report in a convenient PDF format for your further needs.

Bottom line

Knowing how to improve cumulative layout shift is essential for ensuring a plausible user experience. With the help of CSS aspect ratio and bfcache, handling the issue is much more manageable. And, together with Netpeak Spider, you can now prevent and quickly react to a possibly emerging content layout shift problem and deal with it before it affects your website performance. Try the tool now and start boosting your SEO performance right away!