cumulative layout shift

Cumulative Layout Shifts is a new Google Ranking Factor.  CLS will become a ranking factor in 2021 and will be the most critical metrics relevant to how users perceive the website’s performance. There’s nothing worse than when content starts jumping around, a user loses his/her place due to the unexpected movement. Or ends up clicking on the wrong button because of the unintentional layout shift.

cumulative layout shift

So let’s take a look at Cumulative Layout Shift issues in greater detail and how the correct Cumulative Layout Shift help can improve your website in 2021.

What is Cumulative Layout Shift?

The Cumulative Layout Shift is an essential metric that measures visual stability.  It quantifies the number of times users experience layout shifts that were not expected.  As a result, a lower CLS score means that the content is stable and not shifting, and a high CLS can impact your SEO.

Along with the other Core Web Vitals, CLS is all about delivering a smooth page experience across devices, including desktop and mobile, for your visitors.

Should I care about CLS?

CLS or Cumulative Layout Shift issues are what occur when you’re on a web page, and all of a sudden, the content shifts around unexpectedly.  Why should you care about CLS?  Your users have certain expectations to finish reading an article or check out a link and then “BAM.” The unexpected happens, and the content shifts around or worse, they click on a completely different link.

The kind of elements that tend to cause shifts are fonts, images, videos, contact forms, buttons, and many other content types.  Pages that shift around render a poor user experience.

cumulative layout shift

Cumulative Layout Shift and does it affect your SEO

SEO success includes increased rankings, higher traffic, more conversions, and greater revenue. A good user experience is central to achieving outstanding search engine optimization results.

According to Screaming Frog Research, looking at CLS, 47% of desktop and only 46% of mobile URLs and URLs had good CLS scores.  The average CLS score was 0.29 on mobile and only 0.25 on the desktop. Based on such low scores, it’s clear that CLS help is needed to improve expected performance to ensure a stable user experience and achieve higher SEO results.

If the CLS score is low, this is an indicator of coding issues that can be solved.  According to Google, there are five reasons why cumulative shifts happen:

  1. Images without dimensions
  2. Ads, embedded objects, and iframes without dimensions
  3. Dynamically injected content
  4. Web Fonts causing flashes of invisible or un-styled text
  5. Elements on the page waiting for a network response before updating

How is the CLS Issue identified, and how is the CLS Calculated?

While it’s hard for developers to know about the problems that users are having with unexpected shifts of content. Since perhaps the site looked fine initially and an upgrade has caused the content layout shift issues. Maybe it only happens when network connections are slow or for specific users.

In the past, it was tricky to identify these layout shifts without being a live user; however, going forward, this metric will play a significant role in SEO as part of the new Core Web Vitals metrics by Google. Now’s the time to understand the CLS metric as part of the Core Vital Metrics and prepare to enhance user experience before the May 2021 Google update.

The Cumulative Layout Shift Impact Fraction

The Chrome Browser measures the layout and stability and checks to see the “impact region,  or how much of the screen is impacted, focussing on existing elements that unexpectedly show up in a different area.  It compares the before and after state of the shifted element. The Browser identifies the impact region’s size and looks at the impact region’s ratio to the viewing area or viewpoint.

The Cumulative Layout Shift Distance Fraction

If something moves a lot, it’s more distracting. So the metric looks at the farthest (maximum move distance) compared to the viewport height, which provides the distance fraction.

cumulative layout shift

What are Some of the 7 Tools That Can Help to Improve the CLS?

Now’s the time to improve the CLS Score using the different Google tools that are available. The lab tools work in a synthesized environment and are not as useful as the real data captured from live users, but they’re a good starting point.

Here’s a list of some of the tools that can help:

Field tools

Chrome User Experience Report

Pagespeed Insights

Chrome User Experience Report

Search Console (Core Web Vitals report)

web-vitals JavaScript library

Lab tools

Chrome DevTools

Lighthouse

WebPageTest

Effects CLS will have on the May 2021 update

Every year Google comes out with something new that is a game-changer for SEO.  In 2021 these will be the Core Web Vitals Ranking Factors, and they will significantly impact SEO results. By preparing for the future now, websites can see a boost to their SEO.

The BIG Google Update is coming in May of 2021, and it already includes a new report in its Search Console. In addition, Google Lighthouse and Page Speed Insights Reports are being updated. Other changes, such as updated Developer Tools, will also be provided. Thankfully, according to Google, they will not override great content, and content is still King (after all).

CLS, as part of its new Core Web Vitals, is just the start of Google’s dive into user experience, as it dips it’s toe into the pool of the overall user experience. And helping rank sites by reporting on some of the following issues:

How fast does the page load?

How interactive is the page?

Is the page stable? (refers to the CLS)

Is it safe for browsing?

and much more

To prepare for the update, check out the new Core Web Vitals Report on Google Search Console to address any errors or issues that appear.

core web vitals

Summary

In summary,  there is a new Google Ranking Factor, called CLS or Cumulative Layout Shift, that is being officially added to Search Engine Optimization. Chrome now measures the user experience or visual stability (CLS) when content jumps around unexpectedly due to technical issues on the website.

cumulative layout shift

If the answer to either of these questions is yes, this may impact the SEO rankings starting in May 2021 with the Google Update.

Today, most websites have poor CLS scores below for both the desktop and mobile websites, so there is much room for improvement. In the past, Developers have had a difficult time knowing that these content layout shifts are occurring. New reports in the Google Search Console can help prepare for the May 2021 new SEO ranking factors for user experience.

On the positive side, a good CLS score will enhance the user’s experience to a delightful one by fixing the layout shifting issues along with other user experience glitches.  Another significant reason for a good CLS is to boost SEO and improve the rankings, conversions, leads, and revenue.

The bottom line is ready or not, by May of 2021, when Google issues its new update, the way that SEO works will change, with the new user experience Ranking Factors, like Cumulative Layout Shift included in its Core Web Vitals. So why wait for Spring?

Contact us today to see how we can help you.