Cumulative Layout Shift (CLS) can occur during the loading of ads within your site's content. This can happen for both in-article and standard banners.
Often, users will notice an ad beginning to load and shifting the page content. Google now considers CLS one of the Core Web Vitals taken into account for search results. If your site relies on search traffic, you've probably heard about it.
HBAgency has defined a global CSS file that publishers can implement alongside other header scripts. We prefer hosting this script on our CDN to simplify future updates, but you can also copy the styles directly into your own stylesheet.
The provided ad units already include attributes that we use to style their respective divs. To make these slots CLS-compliant, we need to set a fixed height on the ad slot itself. This means that if you are using flexible sizes, such as 300x250 and 300x600, the height of the ad container will be set to 600px.
If a 300x250 ad is served in this space, it will be vertically centered.
To make the tags compatible, insert the following CSS into the head of your site:
<link rel="stylesheet" href="https://hbagency.it/cdn/stylehb.css">
If you have been a registered publisher for a while, your page divs might lack the corresponding class attribute. If so, please retrieve the updated divs from the platform or contact your account manager.
As a publisher, you may choose to opt out of these CLS optimizations. To do this, simply remove the CSS file from your site.
If you have any further questions, please contact your account manager.