What is CLS (Cumulative Layout Shift)?
CLS stands for "Cumulative Layout Shift," one of Google’s Core Web Vitals used to measure the quality of user experience on a website. It tracks unexpected movements on a webpage as it loads, like when an ad appears and causes content to shift suddenly. This can be frustrating for users who lose their place while reading.
A low CLS score means fewer and smaller shifts, improving the overall experience for your readers.
Preventing CLS Issues by Setting Minimum Heights for Ads
As CLS is mostly affected by ads that vary in size, it is important to focus on how Ads are served on your website if you want to solve CLS issues. Serving ads of highly varied sizes can lead to cumulative layout shifts (CLS) on the page.
As Newsifier we have built a solution to prevent these CLS issues. With this solution, you can set a fixed minimal height for your Ad positions (see the images below). If you set a minimum height for the Ads position, it means that this space will be reserved for the Ad position where the Ad loads in. Without setting this minimum height, the Ad would shift the content down, but with setting this minimum height the Ad already has a space load and there will be no layout shift. So, setting this minimum height would ensure a low CLS score and a better experience for your readers.
Steps to Set Minimum Heights for Ad Positions
Go to the Ad Settings section in the Newsifier admin panel.
Select the ad position where you want to set a minimum height, you can insert the script you are looking for in the search field on the ads overview page.
Enter the minimum height value for that position.
Steps to Set Minimum Heights for Ad Positions in Buildifier for Newsifier v2 sites.
Go to the Ad Settings section in the Newsifier admin panel.
Go to Buildifier (Site Builder)
Navigate to a specific page from the left sidebar.
Click on the Ad-block
Enter the minimum height value for that position, either while adding the block, or from the options on the right side menu.
Once you set the minimum height, your ads will load into the reserved space without shifting content. Make sure to coordinate with your ad agency to serve ads that fit within the height you’ve set. Ads larger than the reserved space may still cause layout shifts.
By setting a minimum height for your ad positions, you ensure a better experience for your visitors and avoid frustrating layout shifts.