Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.
Have you ever come across a page where content on the page suddenly changes? Without warning, the text moves, there’s additional white space, and you’ve lost your place.
You probably had that annoying experience because of ‘Cumulative Layout Shift.’e
Cumulative Layout Shift was introduced as a performance metric by Lighthouse in 2020.
Later on, CLS also became one of the metrics that make up Core Web Vitals.
In this blog post, we’ll learn what Cumulative Layout Shift (CLS) is, why it’s part of the Core Web Vitals metric, how it happens, how to measure it, and how webmasters can optimize it.
What is Cumulative Layout Shift?
Let’s understand this performance metric by breaking it down:
Cumulative: It means an increase in quantity
Layout: it is the frame of webpage
Shift: It is the change of position
Hence, Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.
Whenever a page loads, few page elements tend to shift unexpectedly, which often affects the way users interact with the webpage. These elements could be:
- Button
- Subscription forms
- Contact forms
- Images
- Fonts
- Videos
A website having good Cumulative Layout Shift has a stable page display where elements don’t shift around, and rather ensure a stable loading of all website content and elements.
According to Google,
“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.”
Expected vs Unexpected Layout Shift
Layout shifts on a webpage can be both expected and unexpected. It’s important for website owners to know the difference between the two:
Expected layout shift: It happens in response to a user’s input. For example, when a user clicks on the subscribe button but there’s a layout shift in response to this.
Unexpected layout shift: It happens because of third-party content, dynamic elements on the page, and dimensionless images. For example, an ad suddenly appears and shifts text content down the page.
Unexpected movement of content mainly happens when resources are loaded asynchronously. It could also happen when DOM elements are dynamically added alongside existing content.
Usually, culprit in such cases are a third-party widget, a font, an image, or a video with unknown dimensions.
How to Calculate CLS Score
The Cumulative Layout Shift Score can calculated by multiplying the Impact Fraction by the Distance Fraction:
Cumulative Layout Shift (CLS) = Impact Fraction x Distance Fraction If, Impact Fraction is 0.645 and Distance Fraction is 0.179 Then, CLS = 0.645 x 0.179 CLS = 0.1154.
What Causes Cumulative Layout Shift Issues?
According to Google, there are five main reasons for Cumulative Layout Shift:
Images and Videos without dimensions
It is advisable always to specify the width and height of your images and videos.
You can also utilize CSS aspect ratio boxes to allow the browser to allocate the right amount of space on the web page while the image is loading.
Ads, embeds, and iframes without dimensions
Ad sizes can boost revenue through high CTR.
However, this can compromise the quality of user experience by pushing the content down the page.
This layout shift can be mitigated by reserving space for ad slots, eliminating shifts by reserving the largest possible size for the ad slot, or choosing the ad slot’s best possible size based on historical data.
Dynamically injected content
Avoid inserting any new content above existing content, unless it is in response to user interaction.
This will ensure any layout shifts that occur are always expected rather than triggering the image or text to move unexpectedly.
Web Fonts causing FOIT/FOUT
Try using font:display values with your custom fonts like auto, swap, block, fallback, and optional, to prevent unnecessary layout shifts.
To be certain that there is no layout shift, use font:display along with link rel=preload.
Any element that uses that font will be hidden until the font asset has been downloaded fully, is known as FOIT (Flash of invisible text).
Actions waiting for a network response before updating DOM
Always go for “transform” animations for animations of properties that trigger layout changes.
Cumulative Layout Shift Test
Cumulative Layout Shift Performance website metrics can be measured in any of the following ways:
- Cumulative Layout Shift can be measured using the following Field tools:
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
2. CLS can also be measured through these Lab tools:
How to improve Cumulative Layout Shift?
Note that the particular audits mentioned below likely contribute the most to your CLS; however, your page’s CLS score may also be affected by other optimizations that aren’t mentioned here.
Improve your CLS score by incorporating good practices into your development workflow, such as:
- Specifying image dimensions
Always specify, both, width and height for your website’s image and video elements so that the correct spacing is used for images/videos.
Alternatively, you can use CSS aspect ratio boxes to do the same. To learn more about this, read this article. - Reducing layout shifts caused by ads, embeds, and iframes
To reduce layout shifts caused by ads, embeds, and iframes, do things like:
Reserve ad slot size (preferably the largest) before loading the ad library.
Move ads to the bottom or out of the viewport.
Use placeholders when there is no ad available to show.
To learn more, read this article. - Avoiding inserting new content above existing content
Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.
To learn more, read this article. - Preventing the Flash of Invisible Text (FOIT)
The Flash of Invisible Text (FOIT) issue can also affect your page’s CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and/or using the font-display attribute.
Learn more about this here. - Avoiding non-composited animations
Where possible, only perform composited animations to reduce main-thread work and prevent repainting of pixels during the page load.
Conclusion
Understanding Cumulative Layout Shift (CLS) will help you offer a better user experience in the coming days.
Since the metric is a part of Core Web Vitals to improve UX and is scheduled to become a ranking signal in 2021, it is important to understand its importance and impact on your site.
FAQs
Cumulative Layout Shift (CLS) measures how much a webpage changes unexpectedly over time. If a website visitor loads a page and, while reading it, a banner loads, causing the page to jump down, that would result in a high CLS score.
CLS is an important metric for measuring visual stability, because it measures how often users experience unexpected layout shifts. A low CLS ensures that users enjoy the page.
Layout shifts occur when an element on your page changes size or position, affecting the position of content around it. It is possible for the shift to be intended, such as when a container expands as a result of a user action.
Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.
