Call Us TODAY on 020 3588 4240

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


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 |

You can reach us |
By Phone | 020 3588 4240
Website | 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!

You Might Also Like


The following disclaimer applies to Shergroup Limited and its platform, Please read this notice carefully before accessing or using any information provided on our platform.

  1. No Legal Advice | The information presented on, including but not limited to articles, blog posts, FAQs, and other resources, is provided for general informational purposes only. It is not intended to be, and should not be considered, legal advice. The information provided does not create a solicitor/client relationship between Shergroup Limited and the user.
  2. Not a Substitute for Legal Advice | The information on should not be relied upon as a substitute for obtaining legal advice from a qualified professional. The application of laws and regulations can vary based on specific circumstances, and legal advice tailored to your particular situation is crucial. Therefore, we may refer you to a member of our partner firm -Shergroup Legal – on legal matters or encourage you to take your own legal advice from your preferred advisor.
  3. No Guarantee of Accuracy | While we strive to provide accurate and up-to-date information, Shergroup Limited does not guarantee the accuracy, completeness, or reliability of any information on The legal landscape is constantly evolving, and laws may vary across jurisdictions. Therefore, any reliance you place on the information provided is at your own risk.
  4. No Liability | Shergroup Limited, including its officers, employees, agents, and affiliates, shall not be held liable for any direct, indirect, incidental, consequential, or punitive damages arising out of your access to or use of or any information contained therein. This includes, but is not limited to, any errors or omissions in the content, or any actions taken or not taken based on the information provided.
  5. Third-Party Links | may contain links to third-party websites or resources. These links are provided solely for convenience and do not imply endorsement or responsibility for the content, accuracy, or legality of such websites or resources. Shergroup Limited shall not be liable for any damages or losses incurred as a result of accessing or using any third-party websites or resources.
  6. Changes to Disclaimer | Shergroup Limited reserves the right to modify or amend this disclaimer notice at any time without prior notice. Any changes will be effective immediately upon posting on It is your responsibility to review this notice periodically for updates.

By accessing or using, you acknowledge that you have read, understood, and agreed to this disclaimer notice. If you do not agree with any part of this notice, you should refrain from accessing or using

Last updated | 19 July 2023

Should you have any questions or concerns regarding this disclaimer notice, please contact us at [email protected]