Google’s Web Vitals: Cumulative Layout Shift (CLS). How visually stable is my site?

Page element shifts and the sudden change of layout are considered by Google Page Experience as one of the most critical factors for a good UX. 

Cumulative layout shift
Cumulative layout shift

This is how the visual stability of a website is measured and optimized.

Own up: you are one of those mobile device users who abandons a website and doesn’t bother to go back to if you have to contend with jumping content and misclicks while the page is loading.  Fear not- you are by no means the only one. On the contrary, according to the findings of Chrome User Experience, which takes the real browsing experience of browser users into account, you belong to the vast majority of internet users.  It is no coincidence that this aspect, which Google calls the visual stability of webpage elements, Cumulative Layout Shift (CLS), is considered by the search engine to be a decisive factor regarding the quality of the user experience on the web in conjunction with loading speed (Largest Paintful Content) and responsiveness (First Input Delay FID).  This is so much so that the Google Page Experience Update places these three essential Core Web Vital parameters on a par and considers each individual one as a fundamental ranking factor for SERPS. They therefore strongly impact SEO and conversion strategies.

Before taking a closer look at CLS, let’s run through the new core web vital metrics introduced by Google in May 2021.  The Three Musketeers established by the new Google Page Experience algorithm for a good UX are as follows:

  • Largest Paintful Content (LPC): It measures page loading speed and parametrizes the time taken by the largest visible element to complete the rendering process.
  • First Input Delay (FID): It measures the speed of response and thus the interactivity of a website, and parametrizes the time delay of the browser in response to the first user interaction, such as when a user clicks on a button or link.
  • Cumulative Layout Shifts (CLS): It measures the visible stability of shifts within the visual elements of a page and the consequent sudden changes in page layout. 

Not only do these three metrics allow for an accurate and objective analysis of the quality of a site’s navigation and its ability to interact with the user, but they also offer an extraordinary range of possible interventions so as to limit delays and difficulties for users.  It is a win-win situation for everyone involved: users can enjoy a good internet experience and access data and media quickly and efficiently while website owners can see bounce rates reduce by 70% and conversion rates rise by 12% thanks to just a one-second decrease in page loading time.  Google thrives on web content and so awards sites for making access to it easy, fast and pleasant for users with high ranking positions in its search engine results.  

What exactly is CLS and how is it calculated?

Crucially, the Cumulative Layout Shift assesses the stability of the interface and aims at minimizing one of the most common and annoying experiences faced by users when navigating a site from a smartphone or desktop: the unexpected shift of elements on a page during loading. This sudden change in layout occurs when a user goes onto a page to access text and notices changes in page structure.  Generally, text moves but it is also quite common for videos, images, a button or a contact form to do this too.  Sometimes, even an advertising banner may appear without warning on the main page.  These unexpected upward and downward content shifts with resulting changes in layout worsen content usability be it media or text, thus compromising the overall quality of site navigation. In addition, these shifts often generate possible errors driven by the user who may try to overcome the problem by clicking on links or buttons thus causing further delays to the detriment of a good browsing experience. Visual stability shortcomings, a particularly common trait on mobile devices, are no longer forgiven by Google.

But how is visual stability calculated?  Although CLS is very intuitive in its effects, it is perhaps the most complicated of the three web essentials to measure. For a better understanding of how it works, we need to ask why these layout changes occur in the first place: put simply, it is a question of space.  While LCP and FID are a matter of time calculated in seconds and milliseconds, CLS is a matter of space calculated as a percentage of the surface of the occupied viewport by elements during webpage loading.

If the space is not optimized to accommodate the various elements, the browser will change the position of the content to find space for all of the elements.  This in turn affects page layout.  Thus, Google Page Experience calculates the number of unexpected shifts occurring per surface area and cumulates the data between them. The site web.dev defines Cumulative Shift Layout as: “CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.” 

Therefore, the bigger the element and the more the unstable element shifts, the poorer the navigating quality of the site.

Two factors, impact and distance, or rather, Impact fraction and Distance fraction, must be measured and multiplied by each other to calculate the layout shift score.

Impact = the dimensions of the area occupied by an unstable visual element on the viewport.  For example, if a text takes up 50% of the viewport and moves vertically by 25%, the total area occupied by this element will be equal to 75% of the window.

Distance =the distance this unstable element has moved in width or height relative to the viewport.   Based on the above example, it will shift by 25%. 

The product of the two factors must be less than 0.1, the optimal index threshold set out by Google. If the element cumulatively occupies 75% of the viewport and shifts by 25% as seen in our example above, the Layout Shift Score, which measures Cumulative Layout Shift will be 0.1875% over the Google threshold for best results.  Google suggests analyzing at least the 75th percentile of page loads segmented across mobile and desktop to achieve the optimal threshold.  If a site scores an index equal to or less than 0.1 in three-quarters of cases analyzed, no improvements are necessary. Instead, if the score is above 0.1, the site needs to be optimized.    

What tools are available to analyze CLS and how to optimize it

Verifying and measuring stability layout on a webpage or a whole website can be carried out using various measurement tools in the lab and in the field. Both are recommended to guarantee a more accurate analysis of the site’s behavior and help pinpoint the areas in need of improvement before release.

Useable tools are as follows:

  • Chrome User Experience Report
  • PageSpeed ​​Insights
  • Google Search Console, with the new Core Web Vitals report 
  • Chrome Dev Tools
  • Lighthouse
  • WebPageTest
  • Library Javascript web-vitals

Warning: Only unexpected changes in layout are to be considered as dangerous and not those intentional ones determined by interaction between a user and the page elements.   On the contrary, in this case, the faster the change, the better both the user experience and the First Impact Delay score.

It will therefore only be necessary to intervene in sudden and unexpected changes.  But how? Google Dev suggests trying some of the following operations to bring about improvements and optimization for visual stability:

  • Specifying dimensions for content such as video and images
  • Reserving required space for each ad block via CSS
  • Avoiding superimposing content over already existing content
  • Using animations through CSS Transform

Nevertheless, these are partial interventions which only impact one of the Web Core Vitals and so individually, they are not enough to optimize website performance as a whole to improve UX and ultimately impact positively on ranking and SEO.

A more comprehensive approach towards the issue of optimizing website performances can be directly tackled using a tool like the iSmartFrame.  This is a layer which works with a proprietary cache solution to absorb every critical issue a site can present with in relation to Google metrics without having to intervene with codes and programming language. In fact, it is positioned between the browser and the original CMS and optimizes not only visual stability, but also page loading and interaction time, contributing to the success of marketing strategies such as SEO projects and improves ranking for SERP.

But most importantly, this layer gives a good hand in transforming a disappointing user experience into a positive one. Ultimately, it is a winner for improving conversions and therefore the final value of the contents inside the user’s cart.   

Pin It on Pinterest

You may also like

Increase a website’s loading speed: the new challenge launched by Google

Increase a website’s loading speed: the new challenge launched by Google

Speed ​​in business has always been important, and the stories of successful entrepreneurs are full of quickly gained insights which are then executed just as quickly. Well, now more than ever speed has become the business driver, and one of such aspects was rather underestimated until a few years ago: the corporate website’s loading times. If until 2010 having a slow site was normal and did little damage, if not to the visitor’s patience and the user experience, today it has to be avoided at all costs, especially for a company focusing on e-commerce (which does not only means managing an e-store).

read more
User experience: why it is increasingly crucial for the success of an e-commerce

User experience: why it is increasingly crucial for the success of an e-commerce

Do you know the first rule for e-commerce? Here it is: “if users can’t find a product, they cannot even buy it”. Full stop. And breaking this simple rule is easy, even without knowing it. You only need an item poorly displayed in the digital showcase, described with insufficient information or hard to reach due to a slow website, to blow up even the most refined branding, marketing and communication strategies.

read more

Fill the form to discover more

Master Core Web Vitals and boost your business

To configure the platform we need information and technical specifications.
Set a call to learn more