What is Cumulative Layout Shift?
Cumulative Layout Shift, or CLS, is a way to measure how much a page's layout changes without warning over time. For example, a high CLS score would be given if a website visitor loaded a page and was reading it when a banner loaded and the page jumped down.
CLS is one of Google's Core Web Vitals, along with Largest Contentful Paint (how long it takes to load the biggest piece of content) and First Input Delay (how long it takes for a page to be interactive or "clickable"). On every page they index, Google's web crawlers measure CLS.
Cumulative Layout Shift (CLS) example by web.dev
What causes Cumulative Layout Shift?
The biggest cause of layout shifts is not imparting a fixed height and width. This ensures that the page does not reserve space for an image or video, for example. As a result, the text, which usually loads earlier than the images, is suddenly pushed down when the images are there. The same goes for an ad banner, for example. The content is then pushed down as seen in the gif below (by web.dev).
Whether your user experiences layout shifts depends on several aspects. For example, every mobile and internet speed is different. If someone has fast internet then all content, including images and videos will load quickly.
Cookies-based personalized web content will act differently for each visitor, especially if they are in a different place. Also, mobile users may have a very different experience. A small change on a web browser may look like a huge change on a small screen.
Why is CLS important?
It's important to reduce cumulative layout shift (CLS) for two reasons: search engine rankings and user experience. When you have a high CLS score, you might choose the wrong option, check out too soon, or miss parts of a website. This problem is even worse for people who use smartphones to access websites, because layout changes and jumps can have a big effect on how mobile users feel.
Customers will have a better experience on your site and your search ranking will go up if you optimize it and cut down on CLS. Google ranks websites based on how well their pages work, and sites that don't meet their Core Web Vitals guidelines will be hurt. Since 68% of online experiences start with a search, following CLS best practices can help your website move up in the rankings and get more visitors.
What should my CLS score be?
There is no specific CLS score that is considered ideal. However, a score of 0.1 or less is considered good and acceptable by Google's Core Web Vitals guidelines. A score above 0.25 is considered poor, and it may impact the user experience and search engine ranking of your website. It's important to monitor and continuously improve your CLS score to provide a smooth user experience and improve search engine visibility.
How to measure Cumulative Layout Shift?
There are multiple ways to measure your CLS, for example by using Pagespeed Insights or Google Lighthouse. Both tools make it really easy to analyze your page performance and what elements might be causing Layout Shifts.
Pagespeed Insights
- Go to Pagespeed Insights and enter your URL.
- Click on "analyze".
- The score on top is what real users are experiencing.
- When scrolling down you get to the lab data section (based on one simulated visit).
Google Lighthouse
You could also use Google Lighthouse to see if there are layout shifts on your site.
- Go to the page you want to audit.
- Go to Developer Tools by right clicking and then "inspect".
- Go to the tab called "Lighhouse".
- Press "Generate report".
- This looks the same as Pagespeed Insights, however the scores might differ.
Layout Shift debugger
There are also plenty of tools on the internet to measure your Cumulative Layout Shift. Layout shift debugger is one of them. To use this tool you only have to enter the URL you want to test. But in addition you could also select a country you want to simulate your visit from.
RUMvision real user monitoring
With real user monitoring (RUM) you'll be able to view the layout shifts and which element is causing it. You could also add filters to see if a specific browser, viewport or even load state is causing layout shifts. This is the best way, since you will be able to optimize layout shifts for your real users instead of simulated users under ideal conditions.
How to improve Cumulative Layout Shift?
CLS, or Cumulative Layout Shift, is a metric used to measure the visual stability of a website. It measures the number of unexpected layout shifts during the loading process and provides a score ranging from 0 to 1, with 1 being the worst score possible. A high CLS score can result in a poor user experience, as users may struggle to interact with content that is shifting around on the page.
To improve CLS, it's important to focus on reducing layout shifts caused by dynamic content, proper font loading, and avoiding unnecessary DOM manipulation. Here are some tips to help you do just that:
Set width and height to images and iFrames
Most of the time, layout changes happen when content that has already loaded moves after other content has finished loading. So, the best way to deal with this is to book any needed space as far in advance as possible.
<img src="rocket.jpg" alt=Rocket in the sky" width=420 height=400>Setting the width and height attributes of images explicitly is the simplest method for correcting layout shifts that are caused by images that are not sized. 72% of pages have one unsized image, and maybe even more.
When dealing with aspect ratios one could also use different values. By knowing the aspect ratio, the browser can determine the required space. Most modern browsers set the default aspect ratio based on the with and height attributes of an image.
If your image is in a container, CSS can be used to resize the image to the width of the container. Height can be set to auto and width to 100%.
Font loading
Loading fonts is a common cause of layout shifts, as the browser may temporarily display invisible text or an incorrect font while it waits for the font to load. To avoid this, it's best to load fonts asynchronously, using the CSS @font-face rule. You can also use the font-display property in CSS to specify how the font should be displayed while it's loading. For example, you can set font-display: swap to have the browser display a fallback font while it waits for the custom font to load.
Use CSS animations instead of JS animations
Animations can cause layout shifts if they are not executed smoothly. While JavaScript animations are often the preferred choice for dynamic effects, they can result in choppy or uneven animations that cause layout shifts. Instead, consider using CSS animations, which are hardware-accelerated and can result in smoother animations that are less likely to cause layout shifts.
Avoid unnecessary DOM manipulation
Modifying the DOM after the initial render can cause layout shifts, as the browser must reposition elements to reflect the changes. To minimize these shifts, it's best to avoid unnecessary DOM manipulation. If you must modify the DOM, do so to minimize the impact on the layout, such as using absolute positioning to keep elements in place.
Reduce dynamic content
The injection of dynamic content may result in layout shifts, which are one of the factors that contribute to a low CLS score. The term "dynamic content" refers to any type of content that can be altered based on the data and actions of the users. Consider inserting a banner at the very top of the viewport to promote the most recent sale or to invite users to sign up for a newsletter.
Do you have content of this kind posted on your website, and if so, how vital is it that it be easily accessible? After that, check to see that you have reserved sufficient space for the dynamic content.
By implementing these tips, you can reduce the number of layout shifts on your website and improve your CLS score. A lower CLS score will result in a more stable, user-friendly experience for your visitors.
