...

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next, for that reason, it's very important to fix this and prevent this it in above-the-fold placements.
The score is zero to any positive number, where zero means no shifting, and the larger the number, the more layout shift on the page. This is important because having pages page elements shift while a user is trying tries to interact with it is a bad user experience. If you can't seem to find the reason for a high value, try interacting with the page to see how that affects the score.

More can be found in google the Google support document.

How to measure

The easiest way to measure the score of a page is by using the Web Vitals extension for Chrome Web Vitals.
It's also possible to get this information using the reports function in the Google Search Console. More can be found in Core Web Vitals or Google Pagespeed Insights.
On AdEngine we ignore ignores all the calls from bots, so the ads are not triggered by Google Pagespeed Insights this means that we can't the measure of CLS created by our Snigel ads using this tool . This can e easily observed if we validate one of our adengine-app preview pages. The publishers can also is impossible. You, as Publisher can confirm this by validating one of their page your pages and then adding our the Snigel script and validate validating again, the scores will remain the same.

...

How to improve the score

The best way to decrease the layout shift is by reserving the space for the ads beforehand assuring that when they load no content will be moved.
On our tests, this minor change had a very positive impact, and the score went from 1.037 when we didn't had have any css CSS applied to the ads in the page to 0.000, after locking the height for all the containers (adngin-xxxxxx-0 divs).

...

While this is the most extreme example, it shows how important it is to reserve this space. On In the previous example the , we can see the exact same ad on the same page having very different results before and after this small optimization.

What height should I reserve?

For ads with a fixed height, it's easy we just need to reserve the exact height of the ads.

But when we have there are multiple sizes in competition, we need to adopt a different strategy, first of is finding which delivered sizes are the most commons, depending on this we can decide on using those sizes as a default and let the ads expand the div in case their height is superior to the default one. Or we can decide on using the biggest height instead.

The disadvantage of the second method is that when there is a big difference in the multiple heights this may have a negative impact in the look of the page, and so it should be discussed with the publisher.

On both situation ; either reserve min-height to limit CLS or reserve the biggest size available.

In both situations, it's important to make sure the ads are centered, and adding a background in line with the page on this these situations can also make these ads more appealing.

For the css CSS it's also recommended to use media queries to mimic the sizemapping size mapping and so always have the best solution for each viewport and situation.

ege.g.: for the placement adngin-Sidebarsidebar_1-0 which will have the sizes 300x250 and 336x280 until the max-width 820px, and then additionally also have the 300x600 and 160x600 onward, we can use the following css example of CSS to minimize the CLS. Any changes should be checked on staging pages first, as different values might be needed to work correctly with i.e. parallax units.

#adngin-

...

sidebar_1-0 {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 280px;
}
@media screen and (min-width: 821px) {
  #adngin-

...

sidebar_1-0 {
    height: 600px;
  }
}
#adngin-

...

sidebar_1-0 > div {
  display: inline-block;
}

If you don’t know the height of ads used please consult with your account manager.

What about the width? Should we also limit allocate it?

With the exception of very particular cases, it's very rare to have horizontal expansion derived from the ads, so usually, there is no need to allocate any space based in the width.

And what to do when we don't know the height of the ads?

Some ad sizes like the 1x1 and fluid, are per default dynamic which makes it harder to set a specific size for allocation, as with the multi-size ads, checking the reports for the most common or bigger sizes and preemptively allocate it, it's an option, but the general recommendation is to keep this ads above the fold.

Then we also have the automatic expandable ads delivered by google. These will always adjust to all the available width of the screen, and to keep the original aspect ratio of the ad, they end up pushing the content down. This function can only be set/unset account wise (option available in the AdManager global settings) and not to the unit level.

...

These types of ads are very common when requesting a 300x250 on mobile, so if possible it's better to avoid these ads above the fold. And when there is no other option, threat them as multi-size ads.

on the width.

How does asynchronous and lazy loading affect CLS?

Loading the ads while the user scrolls down and reads the contents on the page, increases the ads viewability, but it also increases the chance of having page elements being pushed while visible, which will increase the CLS. For that reason, it's almost mandatory to apply the previous techniques in all the ads that can push any content in the page, to assure the best possible optimization.

How does setting

...

a height of a placement affects parallax?

If we try to set a fixed height for an ad that will be "parallaxing", we may prevent the solution to work as intended if the wrong height is set. The solution is to only reserve the min-height, it's still recommended to review this with a devopyour account manager.

Useful links

Google Developers: Minimize Layout Shift

web.dev: Optimize Cumulative Layout Shift

w3schools: CSS height Property

w3schools: CSS Backgrounds

w3schools: Responsive Web Design - Media Queries