[Resolved] Set the space before ads are loaded

Home Forums Support [Resolved] Set the space before ads are loaded

Home Forums Support Set the space before ads are loaded

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1592455
    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!

    #1592505
    Leo
    Staff
    Customer Support

    Hi there,

    Not sure if I fully understand.

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

    How is the ad loaded?

    #1592518
    Edivaldo

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

    ads loaded = adsense ad

    #1592526
    Edivaldo

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

    #1592535
    Leo
    Staff
    Customer Support

    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.

    #1592540
    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.

    #1592628
    Leo
    Staff
    Customer Support

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

    #1592652
    Edivaldo

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

    #1592673
    Leo
    Staff
    Customer Support

    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.

    #1593008
    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?

    #1593039
    David
    Staff
    Customer Support

    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.

    #1593065
    Edivaldo

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

    #1593070
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.