Best Practices for Fixing CLS Errors

In May of 2024, Google released an update to their system that evaluates the health of websites across the Internet.

One of those updates was to create a scoring mechanism about content that jumps around on the page. This is more commonly referred to as cumulative layout shift (CLS), and can create problems if not tracked and managed effectively.

Cumulative Layout Shift (CLS) is one of the core metrics used by Google to evaluate a website’s performance, specifically related to visual stability. CLS measures how many elements on a page unexpectedly move around. A high CLS score can result in a poor user experience because users might click the wrong button or lose track of what they’re looking at.

What is a CLS Error?

Ultimately, CLS errors are indicative of a poor site experience.

Cumulative layout shifts are used by a user’s web browser not knowing the dimensions of an image or ad, which causes the browser to calculate them after the content has been rendered. This causes the layout to shift

This page here has a really great example: https://web.dev/articles/cls

How to Fix CLS Errors

To fix this, site developers need to ensure they’re always declaring a minimum and maximum width and height for all images on the site. By setting an explicit width and height attributes, the browser will allocate the necessary space for the image or ad, preventing any shifting.

Here is a very basic example:

<img src="image.jpg" width="500" height="300" alt="description">

CLS errors can be caused by other factors. If new content (like a banner or image) is dynamically added above the fold while the page is loading, it will push other elements down, causing a layout shift. To fix these errors, be sure to place dynamic content below the fold or to reserve space for dynamic content ahead of time.

Here is an example where 100 pixels are added to create padding for a dynamically inserted ad:

<div style="min-height: 100px;"></div> <!-- Placeholder for a banner or dynamic element --!>

Sovrn Ad Ops Best Practice

We highly recommend that publishers reserve enough space for the largest ad height that will serve in that space. For example, an ad slot that will show a 728x90 and a 970x250 would have a minimum height of 250px. See below:

<div style="min-height: 250px;"></div>

Here’s some additional information from Google on how to fix these errors.