How to avoid CLS (Cumulative Layout Shift) issues on your website?

What is CLS (Cumulative Layout Shift)?

CLS stands for "Cumulative Layout Shift," which is one of the Core Web Vitals used by Google to assess the quality of user experience on a website. In simple terms, CLS measures how much unexpected movement happens on a webpage while it's loading. These layout shifts are mostly caused by Ads loading on the website.

Imagine you're reading an article online. As you scroll down, suddenly an  ad loads and pushes the text you're reading further down the page (see a visual example below). This shift can be frustrating because you lose your place and have to find where you were reading again.

CLS tries to quantify this frustration. It calculates the total of all these unexpected shifts that happen during the entire time a page is open. A lower CLS score means fewer and smaller shifts, which is better for the user.

Setting a minimum height of your Ad Positions to avoid CLS issues

So how can you avoid CLS issues?

As CLS is mostly affected by ads that vary in size, it is important to focus on how Ads are served on your website if you want to solve CLS issues. If you serve ads of highly varied sizes, it can lead to cumulative layout shifts (CLS) on the page. 

As Newsifier we have built a solution to prevent these CLS issues. With this solution, you can set a fixed minimal height for your Ad positions (see the images below). If you set a minimum height for the Ads position, it means that this space will be reserved for this Ad position where the Ad loads in. Without setting this minimum height, the Ad would shift the content down, but with setting this minimum height the Ad already has a space load in and there will be no layout shift. So, setting this minimum height would ensure a low CLS score and a better experience for your readers.

Once you've set a minimum height for your Ad positions, you should work with your ad agency or ad network to serve ads that do not exceed the minimum height size you have set. Because in that case they would not fit into the reserved Ad space.