Important things To Know About Cumulative Layout Shift

How often have you been reading a page online, and suddenly something changes on the page? The changes could be anything like the text gets moved, videos get disappeared, etc. Usually, these unwanted experiences are annoying, but in some cases, they can cause vital damages.

The unexpected movement of text, videos, or pics takes place because there are some resources that are loaded asynchronously. Also, if DOM elements are added to the page dynamically right above the existing content. For Google, user experience is always a priority, and to resolve such issues various members of the Chrome team have been talking about the layout shift for quite some time now. Maybe that is why Google has curated Cumulative Layout Shift, one of the Page Experience signals.

Understanding Cumulative Layout Shift

Cumulative Layout Shift can be termed as a core web vital metric which is calculated by adding all layout shifts that aren’t caused by any user interactions whatsoever. A layout shift occurs any time when a visible element changes its position from a particular rendered frame to the next.

CLS looks at the proportion of viewports that got impacted by layout shifts along with the movement distance of the elements that got moved.

What is a good CLS score?

CLS score depends on the user experience. Therefore, websites should strive to have a CLS score of 0.1 or less. The lower your CLS score, the more stable your layout will look. Below are the official CLS scores used by Google’s performance tools:

Good- Should be below 0.1
Needs improvement- It should be somewhere between 0.1 and 0.25
Poor- When the CLS is more than 0.25

As per Google’s recommendation, CLS score below 0.1 is apt. Further, Google has also revealed in its Page Experience Update that from June 2021, CLS will become a ranking factor, meaning it can affect your website’s SEO as well.

However, it is likely to be a minor factor, but your CLS score combined with FID and LCP metrics will be affecting SEO. Moreover, CLS correlates with user behavior metrics, but Google claims it doesn’t use metrics like bounce rate or dwell time for ranking purposes. Meanwhile, other search engines like Bing have admitted using those metrics in their ranking algorithms. Therefore, for a better SEO strategy, it is necessary to optimize CLS.

How to calculate Cumulative Layout Shift?

There are different ways in which Google computes or calculates the CLS of a webpage. It starts with measuring the impact fraction and distance fraction for every unexpected layout shift.

-> The impact fraction of CLS

CLS measures the amount of space taken by an unstable element in a viewpoint area between two frames. There is a formula to calculate the Layout Shift Score called Impact Fraction.

Impact Fraction = [Area of Impact Region] / [Area of Viewport]

The graphical representation will help you understand better.

-> Distance Fraction of CLS

Distance Fraction is the measure of the amount of space that the page element has moved from its original position to the final. It is generally the shifts in layout.

The distance fraction got introduced to avoid excessive penalizing cases and shift in large elements by a small amount. Below is the formula to calculate Distance Fraction.

Distance Fraction = [Max Move Distance] / [Height of Viewport]

The graphical representation will help you understand better.

-> Formula to Calculate Google CLS Score

The CLS is computed by multiplying the Impact Fraction by the Distance Fraction. Below is the formula.

Cumulative Layout Shift (CLS) = Impact Fraction * Distance Fraction

The CLS score keeps rising as the impact and distance fraction increases. Moving ahead, let us discuss what causes CLS issues.

What are the reasons causing CLS issues?

As stated by Google, there are four reasons for Cumulative Layout Shift that are mentioned below.

-> Ads, iframes, and embeds without dimensions

Ad sizes are capable of boosting revenues through better CTR. However, they can compromise the quality of user experience by pushing the content down the page.- This shift can get reduced by reserving ample space for ad slots and eliminating shifts. In another way, it can be done by choosing the best possible ad slot based on the size and historical data.

-> By dynamically injected content

Bypass the insertion of any new content above the existing ones unless it is responsive to user interaction. Doing this will ensure that any sort of layout shifts that crop up are always expected instead of triggering the image or text to move abruptly.

-> Videos and Images without any dimensions

It is always better to specify the height and width of your videos and images. To set the height and width, you can use the CSS aspect ratio boxes so that the browser can allocate the right space on the web page.

-> Actions that await a network response before updating the DOM

Opt for “transform” animations for the animation of properties that provoke the layout changes.

Time to wrap up:

If you own a website and want to give your users a better experience, understanding Cumulative Layout Shift is a must. Since this metric is a part of Core Web Vitals and will be a ranking factor for websites in the future makes it even more essential now.