How to Fix CLS (Cumulative Layout Shift) Issue In Search Console

If you see the following error about CLS in your Google Search Console, don’t panic. This is a very common issue that most webmasters have faced when improving Core Web Vitals scores. In this article, you will learn how to fix the most common CLS problems.

How to fix poor CLS score on Google Search Console for Core Web Vitals

What is CLS

CLS, Cumulative Layout Shift, is an important Core Web Vitals metric. It measures how much the page UI shifts during page loading. This usually happens when new content, such as images and advertisements, is added to the page after the page is rendered. Check Google’s article on Cumulative Layout Shift (CLS) if you want to learn more about CLS.

What is a Good CLS Score

Google categorizes cumulative layout shifts into 3 tiers:

Anything less than 0.1 is good
Anything in-between 0.1 and 0.25 needs improvement
Anything above 0.25 is very bad

How to Fix Cumulative Layout Shift Problem

Image and advertisement are usually the main culprits for CLS issues reported on Google Search Console. There are two steps you can do to identify and fix this issue.

Fix CLS Issue Caused By Images

One of the reasons you can have a poor CLS score is because of image loading. The fix is to simply set the width and height on all the images. Without these two attributes, images will cause the subsequent content to shift downward after it is downloaded and rendered. By setting the dimensions of the image, browsers will reserve the space needed for the image to render and thus eliminate content shifting. This solution also works for iframes.

Check all the images on your website that look like the following markup without the width and height attributes:


<img src="some-image.jpg">

Add Width and Height with your own dimensions:


<img src="some-image.jpg" width="100%" height="400px">

Solve Poor CLS Score Caused By Advertisements

Ad units are the biggest contributors to layout shift, which is the biggest reason why your website scores poorly on the CLS metric of Core Web Vitals. Most of the ad networks support dynamic ad sizes and it makes it difficult to address the issue with one fix, you will need to try all of the following to reduce the CLS score.

Step 1: Ad Units With Fixed Dimensions

For all the ad units with fixed dimensions, put them in a container with fixed width and height. For example, if you are displaying a banner ad on the sidebar and you know it will always be in 300 x 250, then you can do this to eliminate content shifting.


<div class="ad-300-by-250">
	your ad code here
</div>


.ad-300-by-250 {
	width: 300px;
	height: 250px;
}

Step 2: Ad Units With dynamic Dimensions

If your ad units are dynamic, you will still put them in a container, but instead of a fixed height, you will set the container with the minimum height. This will not eliminate all of the content shiftings, but it will greatly improve your cumulative layout shift score. For example, if one of your ad slots is displaying an ad with these two formats: 300×250 and 250×200, you can do the following to reduce the effect of this ad slot on your page’s CLS score.


<div class="ad-min-200">
	your ad code here
</div>


.ad-min-200 {
	min-height: 200px;
}

Conclusion

Poor cumulative layout shift is caused by dynamic content changing dimensions or new content added after the page is loaded. In this article, we discussed 3 different ways to identify and fix this issue. Now you know exactly how to fix CLS (Cumulative Layout Shift) issues if they show up on the search console for your websites.

WhatAboutHTML