Site logo

Archived topic

CLS

3 replies · Started by Nicole on August 17, 2022

Viewing posts 1–4 of 4

I have a CLS issue on mobile. Pagespeed insights is showing that it is caused by the hamburger navigation on mobile. What can I do to solve this?

Hi Nicole,

I tried testing your site, and I couldn’t replicate the issue:

https://share.getcloudapp.com/jkuW2BvR

https://share.getcloudapp.com/04uWmDQG

However, upon testing manually on a slow 3g network on mobile, I could see that the cause of the CLS are the ads. They are pushing down the elements upon loading.

How are you adding the advertisements? You can try reserving a slot for the ads to avoid this.

Thanks so much for checking this.

I didn't see any ads above the image which is why I didn't think it was the cause.

How do I reserve a slot?

You can use a Hook Element to add your advertisement. Example:

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

Then add this CSS to set a min height for the div for the ad:

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

Replace 250 with the height of the ad.

This archived topic is closed to new replies.