[Resolved] Set the space before ads are loaded

[Edivaldo]

How do I define the space before the ads are loaded, and thereby improve the Cumulative Layout Shift?

What would be the best approach to do this, and if possible, give me an example.

Thnaks!

[Leo]

Hi there,

Not sure if I fully understand.

Any chance you can link me to the page in question?

How is the ad loaded?

[Edivaldo]

https://www.edivaldobrito.com.br/

ads loaded = adsense ad

[Edivaldo]

the ad is loaded via script added to the page’s html using the Head and Footer plugin!

[Leo]

There is no way to add some padding before the ads are loaded and remove it afterwards unfortunately.

It will not solve the CLS issue either as far as I understand.

[Edivaldo]

It resolves, or at least improves the CLS.

It turns out that when the ads are loaded, they force the redesign of the layout as they do not yet have a space reserved for them.

I just want to reserve these spaces in advance to avoid this.

[Leo]

Looks like you’ve removed the ad at the top of the page so the issue is resolved now?

[Edivaldo]

No. I am still waiting for an answer to the question.

[Leo]

There isn’t a way to add padding to reserve a space for the ad the remove the padding after the ad is loaded unfortunately.

I’d think the best way to avoid adding ads in the header area to completely avoid this issue.

[Edivaldo]

I’m going to rephrase the question because the fact that it’s an ad is getting in the way of your answer.

Imagine that I have an image that will be loaded after the page. Only I need to reserve a space for it before loading it. How do I do?

[David]

Hi there,

that will vary from advert to advert. If the Ads are autoloaded then there is no simple way to identify where the ad will be placed or what an CSS Class could be used.

For ads that you place in a specific position then you can wrap the ad script in a <div> with a CSS Class like so:

<div class="ad-min-400">
    <!-- ad script here -->
</div>

then use some CSS to give it a min height:

.ad-min-400 {
    min-height: 400px;
}

/* Change height on smaller screens if required */
@media(max-width: 768px) {
    .ad-min-400 {
       min-height: 400px;
   }
}

The problem with this method, is if the adverts are responsive then this height may vary to an unknown size. This really is an issue that should be resolved at the source. Or maybe use the Ad Inserter plugin to place your ads as i believe this will ensure the correct sizes are available when the DOM content is loaded.

[Edivaldo]

This will work as the ads have defined maximum sizes and locations.

[David]

Glad to hear that

[Author]

Posts