Cumulative Layout Shift (CLS) is a user-centric metric that measures the stability of a webpage. It allows publishers to get an idea of the frequency by which their users are experiencing some unexpected layout shifts that will harm their experience. We have all already had an unpleasant experience when reading an article because of a sudden change in the layout. They can be very harmful to the user experience, which is why they should be a focus for publishers.
Layout shifts are difficult for publishers to fix as they are not easily identified when running tests. The reason for this is that tests will often run with some predefined image sizes, fonts, etc. In reality, the dimensions can be unknown and end up rendering some unexpected sizes that will shift the layout when being loaded. These tend to be frequent when content is being loaded asynchronously. To get a better understanding of the layout shifts, publishers can measure their CLS score.
The layout shift score is a multiplication of two metrics:
layout shift score = impact fraction * distance fraction
There are many tools to measure your CLS score, we’ve gathered a few here:
Some layout shifts can be initiated by the user himself, so they are not necessarily bad. For example, when a user interacts with a website by making a click, the layout of the page may change. In that case, the user is expecting the change to happen so his overall experience is not damaged. Publishers should make sure that their users do not experience some unexpected shifts. These are the ones that will be harmful to the user experience. In advertising, they are usually due to lazy loading, or ad refresh, and are not user-initiated.
Making sure that ads that render asynchronously don’t create shifts can be tricky. Furthermore, choosing to limit CLS can be harmful to revenue. Indeed, the best way to limit CLS is to filter out some sizes to keep only those that won’t create shifts between each other. But in the programmatic ecosystem, removing some sizes implies that you might be removing the highest bidder, and therefore might be losing revenue. The right balance between the level of acceptable shifts and the advertising revenue needs to be found by publishers. This is why they should closely monitor both their level of CLS and the impact that these shifts have on their overall performances and on their users’ experience while visiting their website.
If as a publisher you are under the impression that your CLS score is harming the UX of your site, there are some best practices you can follow.
First of all, you can save some predefined space for the ad slot. That way if the ad is loaded after the content, it will just fill in the space that was saved for the visual, instead of shifting the layout’s content. The ads can be loaded after the content as the auction needs time to find a winner, but it can also be loaded asynchronously with lazy loading. In both cases, saving the right amount of space will minimize the layout shifts.
When running an auction, there is a possibility that the impression will not be filled. It is important to be prepared for this scenario and to make sure that the ad space that was saved for that impression will not collapse. Otherwise, a layout shift will inevitably occur. Using a placeholder when impressions are not being filled will allow you to prevent these shifts from happening.
The less time your ads take to render, the fewer layout shifts your users will experience. This is why having a fast ad server can be very useful for publishers.
Advertising is responsible for a large portion of the undesired layout shifts on a web page. For that reason, measuring the CLS score to understand the impact of the shifts is necessary. When running ad refresh, the risk is even higher. Because the refreshes will occur after a while, and the situation where a user is seeing the layout shifting while comfortably consuming the content is more probable. Therefore having an ad refresh solution that allows the publisher to control and limit these shifts can be very beneficial. We kept this in mind at Pubstack when designing our Ad refresh solution to make sure publishers would have full control over what is happening on their web pages.
If you’d like to know more on the importance of UX (User Experience) when it comes to your programmatic monetisation, we’ve debunked the myth saying that it is a UX killer : Ad Refresh Myths: “Ad Refresh is a user experience killer”
CLS is also extra important when it comes to User Experience (UX) and Viewability, especially when implementing Ad Refresh. Read more on this topic with our article : "How to boost viewability with Ad Refresh ?"
If you’d like to go further than the topic of CLS when it comes to preserving your inventory’s quality, you can find our topical whitepaper right here : "How to increase revenue with Ad Refresh without affecting the inventory ?"
.png)
%20(2).png)
