Help Center
Go back to application
Help Center
Go back to application
How our customer service works - Report bugs, ask questions and make feature requests
Publish articles
How can I share my articles on social media (Instagram, Facebook and Twitter)?How can I publish an article?How to Use the Article Visibility Feature in Newsifier CMS
Editor
Settings
How to share Analytics with NewsifierHow to set up new pages?Choosing a domain (WWW or without WWW)How to set up Google loginHow to set up Web Push notificationsHow to add logos to my website?How can I change the menu items on the website or mobile app?Setting up your first webpage
Advertising
How can I set up the advertisements on my website?How to fill in the Ad codes into the Ad positions?How to use the banner rotation toolHow can I add Ads.txt to my website?How to show Ads to vistors who are using an AdblockerHow can I fill in an Ad script for the head of my website?How to give my advertising agency access to the CMS to let them set up the advertising?How to set up Ads for websites that run on the Newsifier V2 frontendHow to add Affiliates deal in your articles?How to set up and manage rotating Ads on Newsifier CMSHow can I setup Ads on Newsifier V2 (SPA)?
SEO
Adding your website to Google Publisher CenterHow to get a RSS feed of your website?How can I improve my Google Core Web Vitals and Google Page SpeedHow to avoid CLS (Cumulative Layout Shift) issues on your website?
Categories & Tags
Community
How to use the comment moderation featureHow to filter through user commentsWhat can you do with comments in the moderation queue?How to define rules for individual usersHow to change the general moderation settings for your websiteHow to setup a Whatsapp channel
App
Custom app push notification categories
AI Features
How to use AI CommentsHow to use AI HeadlineHow to use AI Content generation

How to avoid CLS (Cumulative Layout Shift) issues on your website?

What is CLS (Cumulative Layout Shift)?

CLS stands for "Cumulative Layout Shift," which is one of the Core Web Vitals used by Google to assess the quality of user experience on a website. In simple terms, CLS measures how much unexpected movement happens on a webpage while it's loading. These layout shifts are mostly caused by Ads loading on the website.

Imagine you're reading an article online. As you scroll down, suddenly an  ad loads and pushes the text you're reading further down the page (see a visual example below). This shift can be frustrating because you lose your place and have to find where you were reading again.

CLS tries to quantify this frustration. It calculates the total of all these unexpected shifts that happen during the entire time a page is open. A lower CLS score means fewer and smaller shifts, which is better for the user.

Setting a minimum height of your Ad Positions to avoid CLS issues

So how can you avoid CLS issues?

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. If you serve ads of highly varied sizes, it 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 this 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 in 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.

Once you've set a minimum height for your Ad positions, you should work with your ad agency or ad network to serve ads that do not exceed the minimum height size you have set. Because in that case they would not fit into the reserved Ad space.

Powered by Product Fruits