How to Optimize CLS and Its Importance for SEO Performance

In setting up an SEO strategy, there are lots of measurement metrics that you need to analyze. Not only about website traffic, you also need to monitor metrics that represent the appearance of your website, to maximize marketing strategies using SEO.

One of the metrics included in core web vitals is Cumulative Layout Shift (CLS). So, do you know how to optimize CLS to maximize the SEO strategy for your website? Here is the full explanation.

What is CLS?

Cumulative Layout Shift, or CLS, is a core web vitals metric that serves to assess the stability of a website. CLS is able to calculate unexpected page shifts when the position or size of an element shifts the position of the content.

CLS is an element that influences the user experience. It is important for you to do CLS optimization because one of the strategies to maximize SEO is to have a good user experience. Shifting of website pages generally occurs while the page is being downloaded. Individual layout shifts usually occur sequentially over a time span of 1–5 seconds. 

CLS's Importance in SEO

Cumulative Layout Shift (CLS) is one of the factors that affects the user experience and the position of a website in the SERP. Because this metric is one of the most important web vitals, having a low score on it will result in a Google penalty because the website does not comply with the rules.

To build a good SEO strategy, you must also have a credible CLS score. If your website has a poor CLS value, the loading speed usually takes too long, so users will be reluctant to visit your website for a long time. Therefore, knowing how to optimize CLS is important, as it affects the user experience in a positive way and gives you a bigger chance to occupy the top position on Google. 

How to Know the CLS Value

Before knowing how to calculate CLS values, you must understand what values are considered credible by search engines. Google has standardized scores for all core web vitals metrics, including:

• Good: less than 0,1
• Needs Improvement: between 0,1-0,25
• Poor: more than 0.25

Each page on a website can have a different CLS value, depending on the type of screen (device) used, whether it's desktop or mobile. Layout shifts on mobile devices have a more significant effect on CLS values.

1. Impact Fraction

Impact fraction is a metric that measures the impact of an unstable element on the viewport between two frames. This metric represents the ratio of the viewport area to the affected area.

For example, if the affected area is 60% of the total display shown on the screen, then 60% is the impact fraction. So, we can conclude that the value of the impact fraction is 60%, or 0.6.

2. Distance Fraction

Distance fraction is the shift calculated from the farthest distance the element moves that is not related to the viewport.

For example, a full view of the screen is 150 millimeters high. Then, since the distance between the top of the screen and the displayed content is 50 millimeters, we can conclude that the distance fraction value is 50 divided by 150, which is 0.3.

3. Cumulative Layout Shift Value

After you find several values of the impact fraction and distance fraction, continue looking for the cumulative layout shift values with the following formula:

CLS value = impact fraction * distance fraction

If you previously compared 0.6 as the impact fraction to 0.3 as the distance fraction, the formula becomes: 

CLS value = 0,6 * 0,3

CLS value = 0,18

So, from the parable, it can be concluded that the CLS value is 0.18, which is included in the 'need improvement' category.

How to Optimize CLS

After knowing how to calculate the CLS value, you now have to know how to optimize it in order to maximize the SEO strategy for your website. Check out the explanation below.

1. Use ‘font:display’

The first CLS optimization method is to use 'font: display'. Adding custom fonts to your website can increase your CLS score for the following reasons:

• Flashes of Unstyled Text (FOUT): The condition in which the browser displays the replacement font until the custom font has finished loading and temporarily ignores the page layout.
• Flashes of Invisible Text (FOIT): Conditions where, during the rendering process, the page will display text that is not visible until the custom font has finished loading.

Loading custom fonts can cause significant layout changes. You can use the 'font:display' attribute, such as auto, block, fallback, and swap. In addition, adding the <link rel=preload> attribute to your font file can also avoid unwanted layout shifts when loading custom fonts.

2. Define Image Dimensions

Determining image dimensions is an easy way to do CLS optimization but has a very big impact on your website. All image elements on a website require fixed dimensions to avoid unexpected shifts.

This also includes responsive images that also use the same width-to-height ratio so that the browser is able to calculate how much space is needed for the image to display perfectly.

You can use the 'srcset' attribute to define different images according to the same width-to-height ratio. This attribute is capable of helping browsers deliver responsive images.

3. Review Dynamic Content

The effective way on how to optimize CLS is to review dynamic content. Many websites use dynamic content in an effort to make users feel interested in taking certain actions. However, when there are new elements at the top or bottom of the page, dynamic content often shifts other content around it.

Therefore, there are several ways you can review dynamic content, including the following:

• Load dynamic content outside of the user's viewport and use an overlay to invite the user to view the content. This is because shifts that occur during lazy loading will not affect the CLS score.
• Use fixed-size containers to prevent layout shifts.
• Invite users to initiate changes by adding interaction elements that trigger new content to appear; this will minimize layout shifts.

4. Set Ad Banner Width and Height

The last method of CLS optimization is to set the width and height of the ad banner. The existence of banner ads can push or shift the content that is being viewed by the user. This results in a poor user experience on your website. Dynamic ad publishers must provide space in advance so as not to worsen the CLS value of a website.

You can style elements before the tag library so that the ad banner doesn't shift or block the content the user is currently viewing. This CLS optimization method is also important to use even though the ad fills the entire page, so the layout won't shift even though the ad can't be loaded.

Thus, the discussion about how to optimize CLS for your website. You can use SEO services to help optimize your website's CLS and core web vitals. This is because SEO services are provided by professionals who develop measurable and detailed strategies to optimize website performance.