Cumulative Layout Shift (Issue)

Hi there,

From my understanding, ads often cause CLS issues and it's not something the theme can control.

We could try to reserve the space for ads with CSS, but then users who use a browser app like AdBlock will see a big empty space.

please provide any css code for reserve the space for ads.

Take a look at David' suggestion here:
https://generatepress.com/forums/topic/reserve-space-for-ads-in-header-or-post/#post-1855257

I have pasted the code in css but how to paste html code and where. because i am using ad-inserter.

because i am using ad-inserter.

In that case, you would need to check with Ad Inserter's support team.

no other suggestions?

Hello David, please tell me what to do. please provide any css code for reserve the space for ads.

Hi Anil,

With David's approach, you'll need to add your advertisement code through a Hook Element. Reference: https://docs.generatepress.com/article/hooks-element-overview/

Thanks Fernando, problem solved. but I want to show this ads only mobile version. please help.

Can you change the Hook Element code to this?:

<?php

if(wp_is_mobile()) { ?>
<div class="header-advert-wrap">
// Your Ad script goes here
</div>

<?php } ?>

Make sure to add your ad script.

Make sure to check "Enable PHP" in the Hook Element settings as well.

After entering the code, the ad is not visible in the desktop but the desktop space is still being created in Core Vital. Because of which Largest Contentful Paint issue is coming.

photo (Largest Contentful Paint)

Referring to my CSS here:

https://generatepress.com/forums/topic/reserve-space-for-ads-in-header-or-post/#post-1855257

You only need the second rule ie.

@media(max-width: 768px) {
    .header-advert-wrap {
        min-height: 200px;
    }  
}

Adjust the min-height to suit your advert.