[Support request] CLS

[Nicole]

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?

[Fernando]

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.

[Nicole]

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?

[Fernando]

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.

[Author]

Posts