How to Fix Cumulative Layout Shift and Optimize Your Score

Are you tired of visiting websites where content suddenly jumps around or buttons appear out of nowhere as you browse? This could easily be happening in your ecommerce store. Layout shifts are a real headache for customers interacting with your site, negatively impacting the user experience, site performance and consequently Google search rankings. Cumulative Layout Shift (CLS) is a crucial metric to address these issues, and in this article, we’ll show you how to optimize your CLS score to enhance your ecommerce performance. Let’s begin!

Contents:

• What is Cumulative Layout Shift (CLS)
• What is a Good CLS Score
• How to Measure and Monitor Your CLS Score
• How to Fix Common Issues with Cumulative Layout Shift
• Wrapping Things Up

What is Cumulative Layout Shift (CLS)

Let’s start by breaking down what Cumulative Layout Shift means for your ecommerce site. CLS is one of Google’s Core Web Vitals that measures the stability of your web page’s layout. In other words, it is a metric that determines how predictable a page is for your users to navigate. 

All the visible parts of a page and how they fit together make up what a browser thinks of as a layout – images, text, videos, etc. When the contents in your ecommerce website unexpectedly changes due to widgets loading or images resizing, other previously loaded elements that’s already visible on the page can end up needing to be repositioned for everything to fit. Every time this happens, it is considered a layout shift. CLS quantifies the extent to which visible content experiences these shifts. A high CLS score indicates a chaotic, unpredictable layout that can frustrate your visitors.

What is a Good CLS Score

First, let’s briefly look at how the CLS score is calculated. We will use a simple example of a blog article page, displayed on a mobile device.

In this example, there is a hero image, titles, text, and smaller images. In a slower connection, the text and smaller images load right away, but the hero image may take a longer time to download and be visible by the user if the site is not sufficiently optimized. 

As a result, everything below has to shift down by half  the visible portion of the page, just to make room for the hero image to show up where it was intended – at the top of the page. That will give us a CLS score of 0.5, as in 50%. Simply put, your ecommerce web page’s CLS score is basically how much in percentage terms that the visual parts of a page change.

In an ideal world, a Cumulative Layout Shift score would be zero, signifying a perfectly stable layout. However, achieving this is rare since an ecommerce site is a dynamic environment with many moving parts. So, what should you aim for? A great target is to ensure that 75% or more of your page views have a CLS of 0.1 or less. Achieving this means that the vast majority of your customers (regardless of whether they have slow or fast connections) will enjoy a stable and predictable layout, minimizing the chances of frustration in the browsing experience.

How to Measure and Monitor Your CLS Score

Now that we’ve discussed what Cumulative Layout Shift is, how can you find out your score? 

Like all the Core Web Vitals metrics, CLS is what actual users are experiencing when using your site. This information is called “field data”. As such, you can only really rely on measurements that come from real world users, either via: 

• Your own analytics
• Core Web Vitals report section of the Search Console
• Google PageSpeed Insights 
• Other 3rd party tools

Additionally, you can use tools like Google Lighthouse to estimate your CLS score. Note that Lighthouse is considered to be “lab data” which means the data is collected in a controlled environment and uses predefined device and network specifications. For precise and up-to-date field data, you’ll need to rely on real user measurements.

However, monitoring, tracking and benchmarking your CLS score and other Core Web Vitals over time are also other important factors to consider, especially when you need to be able to assess what optimization efforts work and what don’t. 

Valido Web Score addresses all the challenges above. It is integrated with Google PageSpeed Insights, therefore providing reliable real world measurements. The Web Score app also allows you to execute both ad-hoc and scheduled tests according to your monitoring needs, test for other Web Vitals metrics, as well as for Lighthouse scores. Valido Web Score is an all-in-one testing tool for ecommerce, providing practical recommendations on how to optimize your overall site performance.

How to Fix Common Issues with Cumulative Layout Shift

Now, let’s dive into the practical steps to address CLS issues that could be plaguing your ecommerce site.

Images

A common culprit behind layout shifts are images without explicit dimensions (either inline or with its own CSS). Fortunately, there are a couple of ways to fix this. 

One way to address this issue is to explicitly set height and width attributes for images throughout your website. This common technique in HTML development has existed for decades and used to be common practice. However, with responsive design and high definition screens, setting attribute values is not always useful compared to using CSS or letting the browser figure it out by itself.

Nowadays, modern websites are widely using automatic sizing based on the aspect ratio. This tells the user browsers to automatically reserve the correct height based on the aspect ratio of the width and the height that we provide. Therefore, this is possibly the best and most modern way to prevent images from triggering CLS – by using responsive values for images to maintain aspect ratios.

Iframes / Embeds 

In the context of an ecommerce website, anything that we load from another domain or service (widget for a video player, an advertisement slot, etc.) is likely to be loaded inside of an iframe or an embed. If they are not properly managed, iframes and embeds can disrupt your layout. 

We can’t control what happens inside an iframe / embed, but we can control what happens around them. Just like our images, we need to reserve the space that’s going to be taken up by these elements.

By specifying dimensions for parent elements to reserve space for these elements, the user’s browser automatically reserves space for them, thereby preventing any kind of layout shift.

Dynamically Loaded Content 

Avoiding layout shifts with dynamically loaded content can be a challenge. If your site has an infinite scrolling list of products within a category page, or if you’re just performing any kind of lazy loaded content, you have to ensure that you reserve space for dynamically loaded content by specifying dimensions for the containers.

So whether we’re going to be clipping unexpected content or just overestimating the size to be sure that all of it shows, there’s almost always a way to avoid layout shifts with dynamically loaded content. Ideally, you should implement your webpage layouts to be flexible enough to adapt to content that’s bigger or smaller than expected.

Web Fonts

As you may have noticed in our recommendations above, having predefined, flexible width and height on our page’s elements is key to a solid CLS score. Nevertheless, web fonts pose a unique challenge to CLS. With a web font or icon font that’s causing a layout shift, we will need to approach it from a different angle.

The simplest solution for most cases – don’t use the font. In the case of icon fonts, it is actually just much better to directly use SVGs. Not only do you get a greatly enhanced design capability, there’s going to be much fewer issues that icon fonts are prone to when it comes to modern web browsers. It is also substantially better for accessibility. 

If the layout shift is caused by a web font that you definitely need to use for your website, then you need to optimize how the font is being loaded. A great place to start is by preloading essential fonts. The “link rel preload” attribute in HTML is a sort of hint we can give to the browser so it can start downloading the font before the font is discovered the normal way.  

Lastly, if the web font is more of a “nice to have,” another choice would be to use “font display: optional” to prevent shifts. Font display is a property we can set in a font face declaration which supports a few different values. In this case, the optional value tells the browser that the font is, well, optional. This basically means that if the web font takes longer than three seconds to load, the browser will just give up trying to load it. And whatever is already being rendered is what’s going to be shown, thus preventing content shift.

Wrapping Things Up

As we have already seen, Cumulative Layout Shift can significantly impact the user experience on your ecommerce site, but there are a variety of ways for you to monitor this metric and improve it for your online store. Whether you are an ecommerce store manager, developer, or digital marketer, addressing CLS is crucial to maintain a smooth and reliable online shopping experience for your customers. 

With Valido Web Score and its integrated PageSpeed Insights, you can effortlessly monitor your CLS and other Web Vitals performance metrics in real-time. Whether it’s running scheduled tests, benchmarking, or generating actionable insights to optimize other aspects of your web performance, we’ve got you covered. A good CLS score ensures that your customers won’t face unexpected layout shifts, leading to higher customer satisfaction and better performance.

Leon Lau

Digital UX, writing about the latest ecommerce trends.