What is Cumulative Layout Shift?

We’ve all had it happen to us: we’re trying to select an option on a website when the page leaps away and we end up choosing something we didn’t intend to. Doh!

This website behaviour makes us feel slow and angry, similar to the game “down low, too slow.” With the advent of Google’s Core Web Vitals, website developers are now incentivized to enhance their site experience. Core Web Vitals is a set of metrics that helps site owners measure and improve the user experience of their web pages.

What is cumulative layout shift?

The cumulative layout shift (CLS) of a website is a measure of its instability. This metric assesses if a website operates as the user would expect it to.

One of the most aggravating characteristics of an unstable website is that the page’s content varies as the user scrolls through it. It can trigger unexpected behaviour in addition to discomfort. Sometimes the transition has a positive effect. To continue watching, the user only needs to re-locate themselves on the page.

At times, the effect is noticeably worse. For example, a user could expect to click on a button or a link, but before they get there, the components on the page alter. If a user expects to cancel an order but the page switches as they are about to press CANCEL, they may accidentally click ORDER NOW. They can also click on an ad when they do not want to because of a display change.

Users may decide not to return if this activity takes them away from your site. These kinds of activities are extremely aggravating to users. However, as a website owner, it may turn off potential customers or, worse, turn them against you.

How is CLS measured?

Cumulative Layout Shift occurs when the structure of a page shifts unexpectedly. When a user clicks on a link or a button, the page layout is expected to alter. It could be because the page will load new artefacts, or a new calculation will add or modify page elements.

Core Web Vitals (CWV) allows for a 500 ms grace period before recalculating the cumulative layout change score whenever a user interacts with the page. Scrolling is not included in this grace time.

The CLS score is divided into two parts: the impact fraction and the distance fraction. The impact fraction quantifies the effect of an unstable element (a moving element on screen) on what the user sees (the viewport).

In the example below, if a text element starts with 25% of the screen and later goes to 80% of the screen, the impact fraction is 0.80.

The distance fraction is the second factor that influences cumulative layout shift. This value quantifies how far the element moves on the screen and the effect it has on the viewport. In our sample, the same text element occupied around 55% of the screen.

The impact fraction distance fraction is the final CLS score.

In our example, the impact and display fractions are 0.8 and 0.55, resulting in a score of 0.44.

What is a good CLS score?

A good Cumulative Layout Shift, like other user-centric Core Web Vitals, implies a high-quality user experience. Google prefers CLS values of less than 0.1.

Great = less than 0.1

Needs improvement = between 0.1 and 0.25

Poor = more than 0.25

What contributes to a poor CLS score?

Poor CLS scores arise when the browser must calculate the placement of all elements on the screen. If sufficient hinting is not used, the browser may obtain the information late in the parsing process. This changes the rendering, causing the content in the viewport to shift.

The more work the browser needs to do and the less rendering information it has ahead of time, the more likely components may shift on the page. The following page elements may be responsible for a low CLS score:

• Images do not specify width and height and expect the browser to do all the work. In this case, the browser does not allocate space until the image size is fully known, which may cause a redraw.
• Any ad, iframe, or embedded element that does not specify the size.
• New dynamic content is inserted above the current viewport, for which no screen size has been provided before rendering.
• Dynamically loaded fonts can change the rendering behaviour.
• Animations loading after the page has been rendered.

To summarise, anything that is rendered late and necessitates fresh size calculations from the browser may cause the content to move, lowering the Cumulative Layout Shift score.

How can you improve/optimize CLS on your site?

To limit the amount of shifting on-screen, adopt these guidelines as a general rule:

• Provide sizes for elements that support sizing for proper rendering.
• If you do not know the exact size of the elements, allocate screen real estate that can fit the largest possible piece.
• Display dynamic content that could change the rendering below the fold (the first screen) or below the current viewport. If shifting occurs, the user will not be affected.
• Make sure that your ad partners provide all of the specs you need to reduce any layout shifting.
• Avoid web fonts that change the look of the page after it has been loaded.

In addition to tracking the CLS scores of your pages over time in Sortable’s analyzable, you may measure your CLS score in further detail by using:

• Lighthouse
• PageSpeed Insights
• Google’s Search Console
• WebPageTest
• Chrome DevTools

Summing-up

CLS might be less intuitive compared to other Core Web Vitals, but it’s a very useful score. It can help you diagnose why users are unhappy with your site and improve their experience. Now is the time to invest and improve your CLS score. If you haven’t taken care of the site issues yet, the high-ranking pages on Google may rank lower in search engine results pages.

If all this sounds complicated don’t worry Shergroup is your friend in business and is here to help you market your brand better. Use our marketing solutions to get workout your Cumulative Layout Shift and make your website user-friendly and desirable.

Here’s a link to our marketing solutions | https://shergroup.com/marketing-sales-solutions/

You can reach us |
By Phone | 020 3588 4240
Website | www.shergroup.com and you can chat with us from here
Email | [email protected]
Facebook | Check out Shergroup on this channel and message us
Twitter | Check out ShergroupChat on this channel and message us
LINKEDIN | Check out Shergroup’s LINKEDIN feed – and please FOLLOW us!
Instagram | Check out ShergroupChatter and follow us!