Cumulative Layout Shift (CLS)

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 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 page elements shift while a user 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.

	Good	Needs improvement	Poor

	Good	Needs improvement	Poor
Score	<=0.1	<=0.25	>0.25

More can be found in 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.
AdEngine ignores all the calls from bots, so the ads are not triggered by Google Pagespeed Insights this means that the measure of CLS created by Snigel ads using this tool is impossible. You, as Publisher can confirm this by validating one of your pages and then adding the Snigel script and 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 have any 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. In the previous example, 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 need to reserve the exact height of the ads.

But when there are multiple sizes in competition, we need to adopt a different strategy; 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 these situations can also make these ads more appealing.

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

e.g.: for the placement adngin-sidebar_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 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 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 your 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