Cumulative Layout Shift (CLS) 

Cumulative Layout Shift can occur when ads are loading into the site's content. Often times what a user will see is that an ad will start to load and move the content around on the page. Google is now considering this as one of the web vitals that it now takes into account for search results. If your website relies on search traffic, then you’ve probably already heard about it.

Freestar has defined a global CSS file for the publisher to use directly with our other header scripts. We prefer you allow us to host the script in case we need to update it, but you can also copy the styles to your own stylesheet as well.  The ad tags provided already have data attributes that we use to style the containers that hold the ads. For the ads to be CLS compliant, we must set a fixed height on the ad slot itself. That means that if you are using flex sizing, such as 300x250 and 300x600, then the height of the container holding the ad must be 600px tall. If a 300x250 ad is served in this spot, then we vertically center the ad. 

As a publisher, you may make the decision that you do not want to account for CLS. To do so, simply remove the CSS file from your site. If you have more questions about this, please reach out to your account manager.

CLS CSS Code

The code below can be added to your site at any time. If you are an existing client, you will also need to get updated ad tags from your account manager. Reach out to your account manager if you are interested in using this feature.

You can add the CSS file to your site like the example below.

<link rel="stylesheet" href="https://a.pub.network/sitedomain-com/cls.css">

Below, in the Body Tags section, you will see new data attributes on the DIV tag that holds the ad. If you aren’t sure about the sizes that your ad tags run, reach out to your account manager as they can provide a new set of tags that will list out the sizes in the data attributes for use with this CLS CSS file.