What is Cumulative Layout Shift (CLS) and How to Optimize it

Cumulative Layout Shift or CLS is a metric that evaluates the user experience of website users by calculating the level of page shifting on the website. Although web elements that affect user experience are not just one, a poor CLS still has an impact on SEO. 

Impact of CLS on SEO

CLS is a factor that affects rankings in Google and influences website performance and user experience. Not only that, CLS also becomes a core web vitals metric. Therefore, websites may receive penalties if Google standards are not met. 

Poor CLS values indicate that the website is less credible. Therefore, visitors will be reluctant to stay on the website for long. Hence, optimizing the website to achieve a high CLS value is also an important component of SEO strategy. 

It is important to note that a high CLS value indicates many layout shifts on the website page. Fully static pages can achieve low values, even down to 0. Google has set standards for all metrics. Here are good CLS scores:

Good. Less than 0.1 is an acceptable value according to Google standards. 

Needs improvement. Meanwhile, scores from 0.1 to 0.25 indicate that you need to make some changes to reduce unexpected shifts. 

Poor. Scores above 0.25 can significantly lower website rankings. 

Interestingly, one website may have different CLS values for each of its web pages, as well as the type of access location. 

Causes of Poor CLS Values

Poor CLS values on website pages are caused by several elements. There are several elements that can be checked to determine the causes of poor CLS values, such as:

Banner ads, iFrames, embeds, videos, and images with unspecified sizes.

Content that does not use placeholders.

Custom fonts. 

All of these elements typically wait for network responses when uploading elements, causing layout shifts to become larger, even unexpected. 

Optimizing CLS

There are several ways to improve CLS. Here are the points and brief explanations:

Setting Image Dimensions

All image and video elements on the website should have their width and height dimensions set. This is done to avoid unexpected shifts. However, for responsive images, they should use the same width and height ratio, so the browser can calculate the space needed to display the image properly. 

Adjusting Banner Ad Width and Height

Banner ads can push content viewed by users, causing layout shifts. If this happens, the website's user experience becomes suboptimal. To avoid this, you can prepare the space size first so that the CLS value will be optimal and not decrease. 

You can also adjust the element style before the ad tag is created, so the banner ad will not push the content on the screen. This step can also be taken when the ad fills the entire row and column of the page. 

Conclusion

After knowing various steps that can be taken to improve CLS, it cannot be done quickly. Especially if your company does not have a specialized team in this field. 

Because of the importance of CLS for website optimization, you can entrust this CLS issue to a professional digital agency. WEBARQ can be your choice!

With 10 years of experience, WEBARQ will make your website have a good CLS score. So, what are you waiting for? With WEBARQ, website optimization can be done more easily!