How to Improve CLS Performance?

Khadam Ali

Google focuses on a user-centered approach to ranking web pages. Based on Core Web Vitals, it rewards websites that perform well in terms of core content loading speed, initial input lag, and visual stability.

If your company is serious about its presence in Google searches and wants to get more leads from Google, you need to optimize your site for Core Web Vitals. A strategy targeting Core Web Vitals will allow you to deliver a better user experience and increase conversion rates.

Cumulative Layout Shift (CLS) is one of these metrics key.

<img src="CLS.webp" alt="Improve CLS Performance">

What's the Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is a metric used to measure the stability of your website as pages load.

See. Cumulative Layout Shift (CLS)

A layout shift occurs when an element in the viewport moves from its starting position during page load. These above elements are called unstable elements.

For example, if, while trying to read a blog post, an ad pops up between paragraphs that suddenly causes blocks of text to move down, it's unpleasant for users because it interrupts everything they're doing.

A good Cumulative Layout Shift(CLS)scores are less than 0.1. It may seem impossible to achieve this, but it is possible. The scores between 0.1 and 0.25 needs improvement, while any score above 0.25 is considered poor score.

How Are CLS Scores Measured?

CLS can be measured in the lab or in the field (using real user data).

Lab Tools

Chrome DevTools (Performance tab)

Lighthouse

WebPageTest

Field Tools

Chrome User Experience Report

PageSpeed Insights

Core Web Vitals report – Search Console

Web-vitals Javascript library

Lab tools are often used during development to ensure that new features/improvements comply with the threshold set for CLS, while field tools report RUM (Real User Monitoring) data.

How is Layout Shift Score Calculated?

The methods is "layout shift score = impact fraction * distance fraction".

The results provided by these two methods may differ in nature. As for CLS, the values reported by lab tools for a given page may be less than field data. This is because tools like Lighthouse only measure layout shifts during the page load process, and field tools can continuously report user values.

How to Optimize CLS

Here are some tips for optimizing CLS:

1. Specify Image Dimensions

To fix this issue, add the width and height attributes inside the tag.

2. Make Room For Ads or Third-Party Widgets

While you can't control the size of the content placed inside an ad, it's possible to keep track of how big the entire ad/widget is, or potentially how big it could be.

You can find ad sizes using Chrome DevTools and preform the ad container with these values.

Also, keep in mind that ads placed at the top of the page (even higher than website navigation) can cause larger perceived layout shifts than those placed in the middle of the page.

3. Optimize custom font distribution and replacement options

If the website uses a custom font and the font is not available in the system, the browser must install it before it can be used on the page. When installing a font, a different font is used meanwhile. This can be defined by the developer in CSS or provided as a default browser property. The problem here is that the target font and the substitute font differ in the space occupied by a text.

So to avoid layout shifts caused by font-related issues, you can use the following:

Use the font display CSS property.

Preload key web fonts using the HTML tag instead of getting them remotely from the CSS.

You can used these two methods together or separately. You can use the font-display property to specify font substitution behavior and preload the font to increase the chance of it being installed and ready to render even before the page is visually printed.

4. Consider using placeholder for dependent DOM element

If you have AJAX-dependent DOM changes on your website, consider allocating a space for results from the server. This solution is very similar to allocating space for ads and widgets, but in this case you can have more control over how big future content gets.

How to Calculated Cumulative Layout Shift (CLS)?

1. Unstable elements

First, the browser looks for unstable elements, i.e. elements that change their starting position during the page load process.

2. Slip effect

Next, the browser determines the scrolling effect. For this, take the height of the area affected by the unstable elements and divide it by the whole viewport height. This way you can achieve the sliding effect.

3. Sliding distance

Shift distance tracks how much an unstable element moves in relation to the viewport. Distance fraction is the distance traveled by the element divided by the width or height of the view, whichever is greater.

How is the slip effect calculated?

Google has given this formula on its official site as follows:

Formula is "Layout shift score = Impact fraction * Distance fraction".

What Does All This Mean for SEO?

Cumulative Layout Shift affects SEO because Google wants users to visit sites with a good user experience. If your web page does not have a good CLS score, it can affect keyword rankings and lower the performance of your overall SEO. In fact, higher CLS scores are associated with higher bounce rates and shorter session lengths, limiting the potential for users to return to your site in the future.

CLS accounts for 5% of weighted metrics in Google Lighthouse scoring. While not as important as other factors influencing optimization, you still need to create pages that support a positive, stable, and seamless user experience. So be sure to keep this important metric in mind as you develop and restructure your website for optimal SEO performance.