What is Cumulative Layout Shift (CLS), and how can we optimise it?
Have you ever visited a website where a text, picture or button suddenly moves while loading? Or even after loading? Imagine you’re trying to click on a payment button but you’re ending up emptying the whole shopping cart. Bad for you... but even worse for that webshop because the chance you’ll try again is pretty low, right? Sudden layout shifts are annoying for the user and can even cause real commercial damage.
What is a layout shift #
The Cumulative Layout Shift is a Google Core Web Vital metric used by Google to assess the visual stability of your website. To be more precise: it measures all layout shifts that occur with less than 1-second in between and for a maximum of 5 seconds for the total window duration.
Together with the other two Core Web Vitals ‘Largest Contentful Paint’ and ‘First Input Delay’ they assess loading speed and user experience. The results of this assessment are used as a ranking factor for Google Search. If you score ‘good’ on all three Core Web Vitals you can get better ranking positions.
But let’s go back to CLS and look at an example of a shifting layout. It’s pretty annoying right...?
Like with the other Core Web Vitals that are more speed related, the visual stability can influence the user experience of the page heavily. However, in contrast to speed, visual stability can’t be measured or expressed in time. Therefore Google invented a layout shift score which is a product of two different elements which we will explain next.
How is the CLS score calculated? #
To calculate the layout shift score, the browser looks at the total size of the viewport and the movement of so-called unstable elements in the viewport between two rendered frames. With rendering we mean the process that turns website code into the interactive pages users see when they visit a website. The layout score is a product of measures of the movement: the impact and the distance fraction.
The impact fraction measures how unstable elements impact the viewport area between two frames.
In the image above we have an element that fills half the viewport in one frame. In the next frame this element shifts by 25% from the viewport height. The red dotted rectangle represents the visible area of the element in both frames, in this case 75% of the total viewing window, so the impact fraction is 0.75.
The distance fraction measures the distance that these unstable elements have moved in relation to the viewport.
In the image above, the largest viewport dimension is the height. The unstable element has moved 25% of the viewport height, making the distance fraction 0.25.
So in this example, the impact fraction is 0.75 and the distance fraction is 0.25, so the layout shift score is 0.75 * 0.25 = 0.1875.
What is a good CLS score? #
In order to provide a good user experience your website should aim for a cumulative score below 0.1. Like with the other Core Web Vitals Google uses a 75th percentile of page loads segmented across mobile and desktop browsers. In other words: 75% of your users should experience a CLS score between 0 and 0.1 in order to pass Core Web Vitals assessment. Between 0.1 and 0.25 you will need improvements and above 0.25 you’ll get a poor score, which means you don’t pass the Core Web Vitals. Remember: in order to pass the Core Web Vitals assessment you need to score good on all three metrics FID, LCP and CLS.
Measuring in the field vs. measuring in the lab #
There are two methods to measure website performance: in the field and in the lab. With ‘the field’ we mean real life users, people on the internet who interact with your site. In the lab, we can only look at existing data and settings. CLS can be measured both in the field and in a lab setting. However measuring in a lab-setting might be unreliable because certain functionalities are switched off or work differently. Some examples are: cookie banners, live chat tools, ads or personalized content. If you really want to steer based on reliable data you should look at field measurements.
What causes cumulative layout shift? #
So...layout shifts can distract or dissatisfy users, or even send them away if the functionality of a certain element or page is heavily affected. Therefore it’s advisable to take action if your website has a CLS score above 0.1. The most common causes of too much layout shifts are:
- Images without predefined dimensions.
- Ads, embeds, and iframes without dimensions.
- Dynamically loaded content.
- Web Fonts causing Flashes of the invisible text (FOIT) / Flashes of the unstyled text FOUT.
- Tasks waiting for a network response before updating DOM.
How do I fix layout shifts? #
Some tips for improving the CLS:
- Include width and height elements for all images and videos.
- Preload font files for key fonts and download as priority assets.
- Never load dynamic content above content that’s already loaded.
- Use a placeholder or fallback for your embeds.
If you really want to dig a little deeper, and see how the CLS score is being calculated, you should really read the article of Addy Osmani about optimizing CLS on Web.Dev.
You’ll make more money if you’re providing a great user experience
How do I measure Cumulative Layout Shifts #
There are various tools to help business owners gain a better understanding of their CLS score based on field data:
The next two provide users with CLS scores from lab data:
Conclusion about Cumulative Layout Shifts #
The Cumulative Layout Shift undoubtedly deserves to be one of the three Core Web Vitals. Next to loading speed and interactivity, it’s at least annoying to have a webpage that is visually unstable with images, video’s or buttons flying around over your screen.
If you want to improve visual unstable elements, you should focus on setting fixed image or video sizes, watch out with the loading order of dynamically injected content, preload fonts and use placeholders or fallbacks for embeds. We totally get that this might sound a bit too technical so we can always help you to assess and improve your CLS performance.
On our homepage you can find a simplified version of the assessment tool from Google where you can check if you pass Google’s Core Web Vitals test.
