CLS

Hi Nicole,

That specific element you specified should load on Desktop by default. It is your site’s header which holds the elements for both Desktop and Mobile/Tablet. On Desktop, all mobile elements are not displayed which means this shouldn’t affect CLS.

The issue is with the advertisements pushing down elements in your page. To resolve this, one approach is to place the ads in a div or container and set a minimum height through CSS.

See: https://share.getcloudapp.com/nOu9AX4N

.add-min-height-for-advertisment-1 {
    min-height: 250px;
}

Or if your using hooks, as mentioned, you may insert the ads inside a div.

<div class="add-min-height-for-advertisment-1">
    <!-- you ad script here -->
</div>

And set the min height as well via CSS.

Adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Basically, if you set a minimum height for the containers/divs holding the ads, even if the ads haven’t loaded yet, they will take up the space equal to the space you set for the ad on page load. This will prevent CLS issues where the ads push elements out of position.

Kindly see: https://generatepress.com/forums/topic/how-to-add-large-ad-format-without-affecting-cls/#post-1436098

Hope this clarifies. :)

Thanks so much for your response.

I actually had that code in there already which is why I assumed the CLS issue wasn't related to ads. I had set the min-height to 100px and as per your suggestion I changed it to 250px but it hasn't helped the CLS. This is the code I added:

#AdThrive_Header_1_desktop {
    min-height: 250px;
}

Any idea why the code is not helping?

Hi there,

the major CLS contributor is what WP Rocket is doing with your CSS.
If i test your example URL with WP Rocket disabled, which you can do by adding: ?nowprocket to the end of the URL, then your CSS plummets to a healthy 0.016

Options in WP Rocket, such as Optimized CSS Delivery ( aka Critical CSS ) and Unused CSS are major culprits for this kinda thing.

Wow!! Thanks so much! It seems like that solved the problem on desktop.

However, according to Google page speed, I am still failing CLS on a mobile. It lists the logo and menu as the culprits (as far as I understand). Is there something I should do on mobile?
On a mobile I can actually see the logo getting bigger then smaller and causing a jump. Do I need to somehow set a fixed size? I didn't see that option anywhere.

BTW, how did you see the 0.016? Is that on the Lighthouse Chrome add-on?

Looks like the logo is being 'otpimized' by Jetpack ? ( I can see its being requested from the i2.wp.com )
Are you using its Lazyloading ?

CLS Measurements i use some Javascript of my own breaking lol - you can see the same result if you run a Page Speed Insight test.

I don't use Jetpack. I think that the i2.wp.com comes from WP Rocket.

The images are lazy loaded but I have this in the exclusions:

is-logo-image

(it might be from my previous theme and maybe I need a different definition for the Generatepress logo?)

The is-logo-image is a GP class - so it will exclude the GP logo ( and is ) from lazy loading.
Try enabling the Mobile Header and giving that its own logo in Customizer > Layout > Header.

Thank you very much!!!

You're welcome