Maxi Question, might be rhetorical: What do you do for Cumulative Layout Shift (CLS) when you're using Adsense? There's the thing: When you publish a new post, or even for old posts with no to little organic visits, the ads load empty. That ruins the layout, so once the Adsense scripts load, you get a layout shift. And it is also a poor user experience, NOT under webmasters' or developers' control. If you try fixing it, you can use the "unfilled" attribute that comes with the empty ad wrapper, and make it display: none. That would help you provide a better user experience, not serving empty spaces. But here's another thing: the ad wrapper has an inline style, and the style attribute is the first attribute of the wrapper. And although you use the display: none trick, you will first get the empty space and then make it go away. AND ruin your CLS twice. Never seen this problem on sites using Adsense under Google Ad Manager umbrella. So it's just for the average Joe. The issue have been discussed countless times on Google forums, without an answer, and without a resolve. They ruin user experience ON PURPOSE. I'm guessing, if you don't want to serve ads, just don't serve it. They instead ruin your CLS. Any ideas on how to sort this out? 1 👍🏽1 16 💬🗨📰👈
Ammon Johns 🎓 Cumulative Layout Shift (CLS) happens when people don't specify in advance the size of something that will load later. That only happens if the developer forgot to do two important things: 1. measure the size of what content is expected to load late, and put it in a correctly sized empty container that loads fast. 2. don't accept content from third parties that you don't know the size of. Specify what YOU will allow to load, and be firm with it.
Maxi ✍️ Thanks for the answer, but I don't know how this helps. I know I have to specify the size, and that might be a solution, eventhough the space will stay blank. Maybe filling via JS it with some background image that would be overwritten when the unfilled value for the child attribute is missing. Not sure if I'm complying with their policies though. I can't give up third parties, as I can't give up profit. Ammon Johns 🎓 » Maxi First know what size the ads displayed will be. Then create a wrapper, such as a simple DIV block, that will contain the Ad code block, and specify the SIZE of the DIV so that it is just the right size to contain the Ad block without having to resize after it loads. Maxi ✍️ it's dynamic, autoads, so width & height are reponsive but… I have found some sort of a solution will post in a minute Ammon Johns 🎓 » Maxi And that dynamic thing is why CLS *became* an issue. That choice, to be dynamic, creates CLS issues. The solution is to reintroduce fixed size elements so that thing do not dynamically shift (the very definition of CLS). Maxi ✍️ » Ammon Johns I can't use fixed width in my header (hero) ad. Has to be responsive. I will test CLS and see what's better. Dropped some lines below. I think this is it. Maxi ✍️ » Ammon Johns You're right. It still shifts. Looks better for users, but I'm still losing CLS. Will try width and height and test again. Maxi ✍️ » Ammon Johns Works with 100% and exact height. Thank you. Ammon Johns 🎓 » Maxi No problem. The main thing to remember is that CLS is effectively a metric to measure "How dynamic is this?", in direct and real terms. The entire point of Cumulative Layout Shift (CLS) is to determine how much the layout will shift to dynamically change size. Sometimes you may have to choose whether to have dynamic ads, *or* whether to have high scoring in Core Web Vitals (CWV), because it is extremely difficult to have both in a real-world setting. Much of what we have to do in Search Engine Optimization (SEO) is about compromise, and finding the optimal position to take between conflicting business demands. Maxi ✍️ » Ammon Johns Yeah, it's REALLY decent now. 99% desktop, 87% mobile, "green" CLS. Well above industry average (news).
Peterson Do you have auto ads turned on? I manually place Adsense ads and the first one is below the fold (so you can disagree with my strategy 100%), and I have WP rocket add dimensions where missing. I'll double check but I don't think I'm getting flagged for CLS since it's off initial view.
Maxi ✍️ I think I have figured it out 🙂 will post in a minute Maxi ✍️ » Peterson I do have autoads, but this is my header ad, which I am manually inserting. In general, if I have the ad there, autoads won't add another. Caching via Citation Flow (CF). 100% width and exact height work. Most of the time, that banner is 280px anyway, although "automatically" generated, it feels like that's the right size for hero ads in the eyes of google.
Maxi ✍️ So i'm using the following code as early as possible. Placed it in my <head> before <?wp-head. 1. I have added a span with a class (testing-unfilled) in my adsense code: <script async src="https://pagead2.googlesyndication.com/…/adsbygoogle.js…" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"> <span class="testing-unfilled"></span> </ins> <script> (adsbygoogle=window.adsbyGoogle || []).push({}); </script> 2. Created a placeholder image. Couldn't figure out how to make it data image svg, but png works as well. Made it 240px wide, around 60px high, it's a text with my brand-name. 3. Added this code in my <head> <style>.testing-unfilled{display:none}ins.adsbygoogle[data-ad-status=unfilled]{position:relative}ins.adsbygoogle[data-ad-status=unfilled] span.testing-unfilled{display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:#eee url('<?php echo get_stylesheet_directory_uri();?>/placeholder.png') no-repeat center 50%;content:"}</style> It loads ok, first I can only see the background color, then the image, when it loads. Looks more humane and CLS gets better. According to Google, this isn't against their Terms of Service (TOS): https://support.google.com/adsense/answer/10762946?hl=en They also provide similar alternative. Just tweaked it, cause I'm not promoting anything else, so I don't need a link, just a placeholder. <span> was my choice but it could've been anything IMHO. PAGEAD2.GOOGLESYNDICATION.COM pagead2.googlesyndication.com Maxi ✍️ When I have an ad, it doesn't load.
