Archived topic
CLS
3 replies · Started by Nicole on August 17, 2022
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.