Core Web Vitals: Cumulative Layout Shift – What It Is and How to Improve It for SEO
With Google’s Page Experience update now rolled out, websites that are fine-tuned have some new ranking opportunities.
In particular, websites can qualify for a ranking boost based on several new performance metrics Google calls “core web vitals.”
Core web vitals are a set of core webpage functionalities that impact user experience. They now play a part in strategic SEO and can impact how websites rank in Google.
Google has defined three core web vitals:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
This article is part of our series about Google’s page experience update, and I’m updating it to reflect Google’s latest changes. 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 a pageview’s worst “session window.”
A session window is any 5-second span of shifts that occur while a user visits a page. Google looks for the 5-second interval that has the most shift penalties, and that’s the score for that pageview.
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 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 of distance shift in the viewport, Google Developers
So to sum up: CLS is measured by the layout shift score, which is calculated this way:
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 or page views on your site. This example would be over that goal, so it would score poorly.
One illustration to give you a clearer idea of how CLS is scored: If everything inside of the viewport shifted out of the viewport in a single frame, that would have a layout score of 1.0. (See other examples on GitHub.)
The more elements you have on your page that shift in the viewport, the worse your score could be.
Google’s CLS score target
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 data reflected existing pages — which might not have been fine-tuned to comply with core web vitals yet — before these factors applied 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.
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:
- Chrome User Experience Report (field)
- PageSpeed Insights (lab and field)
- Search Console (Core Web Vitals report) (field)
- Chrome DevTools (lab)
- Lighthouse (lab)
- WebPageTest (lab)
- WaterFaller.dev (lab)
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
- Animating elements by “height” and “width” instead of CSS’s “transform: scale()”
- Animating elements by “top”, “right”, “bottom” or “left” instead of CSS’s “transform: translate()”
Basic principles that will improve CLS include:
- 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.
- Never insert content dynamically above existing content.
- If using CSS to animate elements, prefer “transform” animations.
And check out this video about CLS from Google Chrome Developers on YouTube:
Want more in-depth info? Watch our on-demand webinar 3 Expert Tips to Improve Core Web Vitals including the extended Q&A at the end.
Read our entire page experience series for more information on this ranking update:
- What’s the Page Experience Update?
- How to Make a Mobile-Friendly Site
- Intrusive Interstitials & Why They’re Bad for SEO
- HTTPS for Users and Ranking
- Core Web Vitals Overview
- Core Web Vitals: LCP (Largest Contentful Paint)
- Core Web Vitals: FID (First Input Delay)
- Core Web Vitals: CLS (Cumulative Layout Shift)