Cumulative Layout Shift: Google’s Next Ranking Factor for 2023

With 2023 round the corner, you get to see many metrics that have come to the fore with the assurance that they are the best choices for ranking your website in search engine results in 2023.

One such metric is Cumulative Layout Shift (CLS), a Google metric that measures a user experience event. It is likely to be one of the reliable google search ranking factors for your website in 2023.

So, let us understand it first and then unlock the ways to use it to optimize websites.

What is CLS?

It certainly makes sense first to understand what CLS is so that you can figure out the rest of the things better.

It is the unexpected shiting of web page elements during the downloading phase of web pages. Usually, the stuff that causes a shift are fonts, images, videos, contact forms, buttons, etc.

It would help if you minimized CLS as pages that shift around can cause a poor user experience.

Factors Behind CLS

Poor CLS happens mainly due to five reasons, according to Google. And the factors are:

• Images without dimensions
• Ads embeds, and iframes without dimensions
• Dynamically injected content
• Web Fonts causing FOIT/FOUT
• Actions in the queue for a network response before updating DOM

Now, let us walk through how we can get rid of the CLS-causing factors;

 – Images

According to Google, the dimensions of images and videos should conform to the declarations in HTML. And when it comes to responsive images, you need to ensure that the different image sizes for the different viewports use the same aspect ratio. And Google recommends a good resource–AspectRatioCalculator.com– for calculating the aspect ratios.

 – Ads

Dealing with ads is not a smooth affair. It is a bit tricky. One of the best ways to deal with the CLS causing ads is to style the element where the ad is going to appear. In other words, you can confine the ad inside a div with a specific height and width so that the ad cannot cause CLS.

 – Dynamically Injected Content

You can link content on a web page dynamically. For example, you can link a YouTube video or tweet in WordPress, which will display the video or tweet as embedded objects.

 – Web-Based Fonts

If you download web fonts, it can cause something called Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT). You can prevent it by using rel=” preload” in the link for downloading that web font. Also, you can find out the factors causing CLS by using Lighthouse.

 – CLS Can Slip in During Development

It can also happen that CLS can sneak in during the development stage itself as many of the assets that deliver the page get loaded onto the browser’s cache. When a developer visits that page, which is under development, he will not notice the presence of a layout shift as the page elements are already downloaded.

How to calculate CLS?

It will be useful if you make some efforts to calculate CLS. When you calculate, you will find the involvement of two metrics or events. While the first is called Impact Fraction, the second is called Distance Fraction.

 – Impact Fraction

In essence, the Impact Fraction is a measure of the amount of space an unstable element takes up in the viewport, which you see on the mobile screen.

During the downloading and subsequent shifting of an element, the total space that the element occupies in the viewport is called the Impact Fraction.

For example, if an element occupies 50 percent of the viewport and then drops down by 25 percent. When you add those values, you get 75 percent, which is called the Impact Fraction, and it’s expressed as a score of 0.75.

 – Distance Fraction

Distance Fraction is the second measurement that denotes the amount of space the element moved from the original position to the final position.

When you refer to the example cited in the Impact Fraction section, you will find that the page element moved 25%.

You can now easily calculate the CLS–by multiplying the Impact Fraction by the Distance Fraction:

0.75 x 0.25 = 0.1875

CLS Measuring Methodology

You can measure performance metrics in one of two ways–’ In the Lab’ and ‘In the Field’.

 – In the Lab

When you develop new features, you can use this method. You cannot measure the impact of new features on real users during the development phase. As such, you need to test the feature in the lab to prevent performance regressions.

 # Lab Tools

• Chrome DevTools
• Lighthouse

 – In the Field

Once development is over, you need to test on real users who will be loading and interacting with the page. The site performance depends on the user’s device capabilities and network conditions in addition to how the user interacts with the page. Therefore, you need to test your site in the field to know how it performs with real users.

 # Field Tools

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)

Conclusion

You need to optimize your website so that it appears in the top Google search results. Although the existing factors, like website page load speed, etc., will play decisive roles, CLS is expected to play a new role that you should not miss out on in 2021. It will help if you spend some time understanding it.