Does 'data-full-width-responsive=true' for mobile cause CLS?

I tried full responsive ads and found tons of Cumulative Layout Shift (CLS)

[guarriman3]

Hi,

I'm trying to test the full-width responsive ads on mobile devices with this piece of code:

<ins class="adsbygoogle" 
style="display:inline-block;width:300px;height:250px" 
data-ad-client="ca-pub-1234" 
data-ad-slot="1234" 
data-full-width-responsive="true">
</ins>

And I wondered if this kind of full-width responsive ads on mobile devices cause Cumulative Layout Shift (CLS) issues.

Some weeks ago, I tried the full responsive ads

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot="1234"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>

And I suffered tons of Cumulative Layout Shift (CLS) warnins by Google, even though I insted the correspondent 'div' with minimum sizes.

Am I safe with the full-width responsive ads on mobile devices? Apparently, these ad units just extend the width and keeps the height, and should not cause Cumulative Layout Shift (CLS) issues.

Any similar experience is appreciated. Thank you.

[not2easy]

Does the parent div> have a fixed width or a max-width setting? Are you able to view the layout shift when ads are loaded so you view their effect?

[guarriman3]

Thank you @not2easy for your nice answer.

Does the parent div> have a fixed width or a max-width setting?

No. I thought it was 'mandatory' only for full responsive ads, not for full-width responsive ads on mobile devices.

As far as I understand, I'm showing an ad unit with fixed height:

style="display:inline-block;width:300px;height:250px"

so, if Google extends the ad's width until the full width of the mobile's screen, users shall not see the layout shift, right? I thought that such shift would come from final contents from the AdSense's servers with a height larger than the initial height reserved by the HTML.

Anyway, when I tried the full responsive ads, the parent 'div' did have a min-height, and Google warned me with tons of CLS issues. Should I set a 'min-height' or a 'max-height' as you suggest?

Are you able to view the layout shift when ads are loaded so you view their effect?

No, because for mobile users the AdSense units are loaded in a lazy way when user starts to scroll down. As the full-width responsive ads are far below the fold, I guess that users shall not view such layout shift, in case it exists. I'm not sure whether Google's JavaScript emulator will see it.

[NickMNS]

CLS is caused when new content is added to a page. In the case of an ad, any ad it can absolutely cause CLS, specially when there is no height specified (max-height, doesn't count). As the addition of the ad unit would cause the div to resize to height of the ad thus pushing everything down the page (causing CLS). Using the full-width option shouldn't change this per-se. But the full-width ad could cause an issue even if a height is set, in the case where page content wraps, thus taking the space, horizontally, of the ad when it is not present. Thus adding the ad would push all the content to left and down as it wraps.

the AdSense units are loaded in a lazy way

Lazy loading your ads is the most likely cause of the CLS. If you do lazy load the ads, be sure that the ad containers are correctly sized for the ads before the ads are added to the page, this will prevent CLS. For the full width ads, just make sure that the content isn't wrapping into the place of the ads.



@not2easy

Does the parent div> have a fixed width or a max-width setting?

The full width setting ignores the width of the parent div, and automatically uses width of the device screen.

Her is an article that explains CLS in detail:
[web.dev...]

[surfgatinho]

I think there might also be an issue with the Adsense code setting the parent div's height to auto as well - even if you do specify a height for it...

[JorgeV]

Hello,

The Adsense code modifies all the styles of DOM elements.

[No5needinput]

Lighthouse MOBILE test for page displaying 4 Adsense ads

Cumulative Layout Shift 0.001

Performance - 93
Accessibility - 98
Best Practices - 93
SEO - 100
Progressive Web App - Green Tick
Publisher Ads - 99

Ads displayed with code:

<style>.ads{height:25px;min-height:25px}</style>

AD TYPE 1

<div class="ads"></div><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="xyx"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><div class="ads"></div>

AD TYPE 2

<div class="ads"></div><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="123" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><div class="ads"></div>