Core Web Vitals: Cumulative Layout Shift – What It Is and How to Improve It for SEO

In May 2020, Google announced that “core web vitals” would be incorporated into a ranking algorithm update called page experience, set to hit in 2021. Core web vitals is a set of core webpage functionalities that impact user experience. And we believe they will play a part in strategic SEO and impact how websites rank in Google.

At the time of writing, Google has defined three core web vitals:

  • Largest contentful paint
  • First input delay
  • Cumulative layout shift

This is the last article in our series about Google’s upcoming Page Experience update. Here I’ll discuss cumulative layout shift, or CLS:

What Is Cumulative Layout Shift (CLS)?

CLS measures the formatting changes to a webpage after the initial rendering in a browser, usually by the dynamic insertion of content above what is already being shown.

It is generally annoying to be clicking on a link and have that link “move,” resulting in a click to an unexpected location. This kind of instability of content on a webpage creates a bad user experience.

Google discusses CLS here:

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

Unexpected page layout shifts hurt the user experience. One example is when a button or link shifts on the webpage, causing a person to click something else. This can be really bad if it means they accidentally made a purchase, as you can see in this demo from Google:

Importantly, Google clarifies that not all layout shifts are considered bad:

A layout shift is only bad if the user isn’t expecting it. On the other hand, layout shifts that occur in response to user interactions (clicking a link, pressing a button, typing in a search box and similar) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.

How Is Cumulative Layout Shift (CLS) Measured?

CLS is measured by the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

To calculate a layout shift score, Google multiplies the impact fraction and the distance fraction. I’ll break these down.

Impact fraction is how much viewport area an unstable element takes up between two frames.

In the example below, you can see that the element takes up 50% of the original viewport, but then is moved down by 25%. Between both frames, the element takes up 50% plus 25% of the viewport, causing the impact fraction to be 75%.

Example CLS layout shift in viewport.
Example of layout shift between two frames, Google Developers

Distance fraction is the distance that an unstable element has moved. The example below shows that the element has moved 25% of the viewport height.

Example CLS distance shift.
Example of distance shift in the viewport, Google Developers

So to sum up: CLS is measured by the layout shift score, which is calculated like so:

     Impact fraction * distance fraction = layout shift score

Taking the examples above, the calculation would go like so: 0.75 * 0.25 = 0.1875. Google says a webpage should maintain a CLS of less than 0.1 across all pages on your site. This example would be over that goal, so it would score poorly.

Google totals all the scores for every unexpected layout shift that occurs during the entire lifespan of the page. So the more elements you have on your page that shift in the viewport, the worse your score will be.

Cumulative Layout Shift target scores.
Google’s CLS score target

You can read more about the layout shift score here and how Google defines its thresholds here.

How Does Cumulative Layout Shift (CLS) Impact SEO?

As with the other core web vitals, CLS helps ensure that the page experience is smooth for your visitors — on both mobile and desktop.

A good layout shift score can help ensure users don’t get frustrated with your webpage, don’t accidentally click and get taken to another page, and don’t mistakenly make a purchase. A good user experience helps you achieve all the outcomes we like to see in SEO: rankings, traffic, conversions and revenue.

According to Screaming Frog research, URLs in Position 1 of the search results were 10% more likely to pass the core web vitals assessment than URLs in Position 9. Of course, this relates to the existing pages — which may not comply with core web vitals yet — even before these factors apply to the ranking algorithms.

Looking at CLS, less than half (46%) of mobile URLs and less than half (47%) of desktop URLs had “good” CLS scores. The average CLS score was 0.29 on mobile and 0.25 on desktop. In other words, there is room for CLS improvement on most sites.

Screaming Frog segmented pass rates by position, and found a decline in the percentage of “good” URLs as you move down the positions on the search results page. The following example is mobile results, but they also graphed the data for desktop.

Mobile CLS Classification by Ranking Position data.
“How Many Sites Pass the Core Web Vitals Assessment?,” screamingfrog.co.uk

How Do I Improve My Cumulative Layout Shift (CLS) Score?

Google offers lab tools and field tools to help you measure, then optimize, your CLS score. For CLS, lab tools may not be as useful as the real data captured in the wild for your webpages.

Tools provided include:

You can also measure CLS with the web-vitals JavaScript library, and you can learn more about that here.

Common causes of layout shifts include:

  • Images without dimensions
  • Ads, video and other embedded objects or iframes without dimensions
  • Dynamically injected content
  • Late-loading CSS where styles are applied after other items have been loaded
  • Web fonts causing flashes of invisible or unstyled text
  • Elements on the page that wait for other items to be loaded over the network before appearing

Basic principles that will improve CLS include:

  1. Always use size attributes for images, videos and other embedded items or iframes. If an element is dynamically loaded, use CSS to style any container elements to the same size or aspect ratio before the content is loaded. Then, when the content is loaded into those container elements, the page will not shift.
  2. Never insert content dynamically above existing content.
  3. If using CSS to animate elements, prefer “transform” animations.

And check out this video about CLS from Google Chrome Developers on YouTube:

To understand more about the coming update, read our entire Page Experience series:

  1. What’s the Page Experience Update?
  2. How to Make a Mobile-Friendly Site
  3. Intrusive Interstitials & Why They’re Bad for SEO
  4. Safe Browsing to Protect Your Website, Visitors & Ranking
  5. HTTPS for Users and Ranking
  6. Core Web Vitals Overview
  7. Core Web Vitals: LCP (Largest Contentful Paint)
  8. Core Web Vitals: FID (First Input Delay)
  9. Core Web Vitals: CLS (Cumulative Layout Shift)
Ebook to download on Page Experience preparation.
Click to download this entire series as a printable ebook.

If you need expert SEO assistance, please contact us for a free consultation today.

Bruce Clay is founder and president of Bruce Clay, Inc., a global digital marketing firm providing search engine optimization, pay-per-click, social media marketing, SEO-friendly web architecture, and SEO tools and education. Connect with him on LinkedIn and other social networks from Bruce's author page.
Comments (15)
Filed under: SEO — Tags: ,
Still on the hunt for actionable tips and insights? Each of these recent SEO posts is better than the last!
Bruce Clay on February 20, 2021
How to Improve Google Image Search Ranking
Bruce Clay on February 11, 2021
What Is a Google Penalty and How Do I Avoid It?
Bruce Clay on February 5, 2021
The Always Up-to-Date SEO Checklist

15 Replies to “Core Web Vitals: Cumulative Layout Shift – What It Is and How to Improve It for SEO”

Gaurav Jain

hello
we notice strange thing

When we use adsenses ads then our Google page speed score is is bellow 50 on mobile and bellow 85 on desktop but when we remove adsense then both mobile desktop score is 95+

What we should do? as we can not remove adsense as its our main revenue .

Paula Allen

Gaurav: AdSense uses A TON of JavaScript to render. You can try to load the scripts asyncronously, using the “async” attribute. That will help minimally, but there’s not much else you can do unless you only use text ads.

Google AdSense images may not be optimized, may be set to different display sizes, etc., so there’s nothing you can do about that. If AdSense is the only revenue stream of the site, that’s something you will have to live with.

What our technical staff recommends is to test the site without AdSense and get it as good as it can be; then turn AdSense on.

Hello,
Much obliged to you for clarifying about aggregate format move. You have given some great tips to improve the CLS for a site

We at Unique Submission. We have our ability in each type of Online Assignment Help which Includes Dissertation Writing, Essay Writing, Assignment composing, Research Proposal Writing, Admission essay composing, Coursework composing and many more.

Get The Best Assignment Help From Best Assignment Helpers Online

Thank you for explaining about cumulative layout shift. You have given some good tips to improve the CLS for a website.

First time reading any blog on Bruceclay, Nicely documented content on CLS. This will be very useful for my team.

Paula Allen

Madover: Thanks for the feedback. We intended this whole series to help the industry understand and prepare for Google’s coming Page Experience update. Thank you for reading and letting us know!

I had a hard time understanding CLS. But this post explains it great.

Great series. I was looking for a coverage of the core web vitals. Thanks a lot for sharing.

I do local SEO for my Income Tax business website. I am now working to make my website design more SEO friendly. There are many factors involved with this. I am now unable to request a index on search console because this is down.

Chris
Owner CEL Financial Services
IRS Registered Tax Preparer
Registered bonded California CTEC Tax Preparer
https://incometaxprepfillmore.com/income-tax-santa-paula-ca

Great article, Bruce Clay’s recent articles covering Page Experience and SEO has been absolute class.

Nice Idea, I think its a part of content optimization, required to make it user friendly.

This is a very comprehensive article. I was aware of most of this, but it covered more than I was aware of what is causing me problems. Thank you for sharing!

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

Serving North America based in the Los Angeles Metropolitan Area
Bruce Clay, Inc. | 2245 First St., Suite 101 | Simi Valley, CA 93065
Voice: 1-805-517-1900 | Toll Free: 1-866-517-1900 | Fax: 1-805-517-1919