What is Cumulative Layout Shift and How to Optimize It

Cumulative Layout Shift (CLS) is one of the core web vitals metrics. CLS is a metric that measures the shifting of the position of elements, that is their visual stability, as a website continues to download. Elements that may cause order shift; videos, images, forms, buttons, and different types of content.

Why Does Cumulative Layout Shift (CLS) Occur?

Cumulative Layout Shift can be for many reasons:

• Pictures
• Videolar
• Ads
• Embed items
• Iframes
• Dynamically added content
• Web Fonts FOIT & FOUT

Apart from these, the fact that the site speed is too low and the width and height values are not entered on the HTML adversely affects the visual stability, which leads to an increase in CLS.

Understanding Cumulative Order Change

One of the tools we can use to measure the CLS metric is Google PageSpeed Insights. Apart from that, another tool we can use is the Google Chrome Lighthouse extension. Can we understand the existence of CLS without using tools? Yes, we can notice the shifts in large elements when we first start loading our site , to be able to notice more clearly, it is enough to start loading the site at low internet speed.

How Can We Improve/Optimize the CLS on Your Site?

Elements Not Given Width and Height Values

To eliminate the CLS issue, we first need to maintain visual stability on our site. If we talk about visuals as an example, if you do not specify the width and height values on the HTML, the element before the image will be loaded until the page loads. Once the image is loaded, the image will take its place, and the element that comes in its place will slide down. So, if we determine the width height values of the images on HTML, will it not cause problems in terms of responsiveness? everyone started thinking. A correct idea, if we determine only through HTML, visuals on mobile will create problems. Therefore, we need to use the following css for img tags;

img 
{ 
width: 100%; 
height: auto; 
}

You can watch the video below for detailed information.

FOIT & FOUT Problems and Optimization of Web Fonts

• FOUT (Flash of Unstyled Text) raises and damages the CLS metric when the temporary font arrives until the original font used in the web page is loaded, and therefore the shift experienced when it is reloaded.
• FOIT (Flash of Invisible Text) raises the CLS Metric for slippage drift caused by late loading of the font used on the web page.

You can use the font-display feature of CSS and codes such as auto, optional, swap to lower the CLS value and repair these problems.

font-display: auto;

What is the Optimize CLS score?

The Importance of CLS in terms of SEO

SEO has been many years since we came out of a position where ranking was achieved only with the right content planning and keyword optimization. Now, Google Keyword puts the pages with good targeting and user experience in the first place. The CLS metric entered our lives with the core update such as core web vitals to measure the user experience. If your site loads fast and has high visual stability, the user who enters our site has more session time and this is reflected in our Bounce Rate rates.

Want to Find Out More?

web.dev/cls/