...
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 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.
...
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 all the calls from bots, so the ads are not triggered by Google Pagespeed Insights this means that we can't measure CLS created by our ads using this tool. This can e easily observed if we validate one of our adengine-app preview pages. The publishers can also confirm this by validating one of their page pages and then adding our script and validate validating again, the scores will remain the same.
...
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 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.
...
But when we have multiple sizes in competition we need to adopt a different strategy, first of is finding which delivered sizes are the most commonscommon, 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 In both situation 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 and so always have the best solution for each viewport and situation.
ege.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 css CSS to minimize the CLS.
| Code Block |
|---|
#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;
} |
...
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 on 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 . 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 these types of ads above the fold.
Then we also have the automatic expandable ads delivered by googleGoogle. These will always adjust to all the available width widths 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 treat them as multi-size ads.
How does asynchronous and lazy loading affect CLS?
...
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 devopdeveloper.
Useful links
Google Developers: Minimize Layout Shift
...