Cumulative Layout Shift (CLS) is an important Core Web Vital introduced by Google Lighthouse in 2020. It has become a vital element of Google’s ranking factor since July 2021.
Many websites have issues optimizing CLS, making Core Web Vital to fail, even with good LCP and FID scores, eventually impacting the website performance.
A web page layout stability is more important for a great user experience. You should have encountered the following situation on any website.
- Links in the page move inconsistently.
- When you are about to click a button, but nearby button functions.
- Unexpected movement of the content on web pages.
Video Credits – Web.dev
The above steps will be annoying and hurt the user experience hugely. We call this as layout instability (as seen in the above video).
Cumulative layout shift measures how a web page layout is stable.
In this article, we are going to break down the complete concept on
- What is cumulative layout shift (CLS)?
- What is a good score?
- How CLS Score gets affected?
- How to measure CLS?
- What are the ways to fix and improve CLS?
What Is Cumulative Layout Shift?
CLS is a key web performance metric that measures the visual stability of web pages. As the name suggests, CLS calculates all (cumulative) layout shifts that happen on a web page.
Every time a visible element changes it’s position from a rendered frame to another, it is called a layout shift.
A session window occurs when one or more layout shifts occur in rapid succession, with less than one second between each shift and a maximum duration of five seconds.
All layout shifts within a session window with the maximum cumulative score are considered the largest burst. Higher the largest burst, the worse the user experience.
This happens due to asynchronously loaded resources or dynamically added DOM elements.
What Causes Poor CLS Score?
The reasons behind the largest burst are the following:
- Image or Video of unknown dimensions
- Rendering of Font than its fallback – either smaller or larger
- Third-party ads
- Unwanted Pop-ups that can’t quit easily
Dynamically resizing widget
What Is Good CLS Score?
A web page with a better user experience should have a cumulative layout shift (CLS) of less or equal to 0.1 when 75% of the page is loaded. This is the same across mobile and desktop devices.
Here is Google’s recommended slabs of CLS Score:
- Good – Less than 0.1
- Need Improvement – 0.1 to 0.25
- Poor – More than 0.25
How Is Cumulative Layout Shift Calculated?
Cumulative layout shift is the sum of all layout shifts and is calculated by the layout instability API.
This reports the instability of any layout that changes between two frames from the starting point within the viewpoint.
A layout change is considered only when existing visual elements change their start point.
When an element is added to the DOM or an existing element is resized, it doesn’t count as a layout shift—as long as the change does not affect other visible elements.
Layout Shift Score:
Layout Shift Score = impact fraction * distance fraction
Layout shift is calculated by the product of impact fraction and distance fraction.
During layout shift calculations, the browser analyzes viewport size and unstable element movement in the viewport between two frames.
Impact Fraction:
The impact fraction measures how the unstable elements impact the change of layout from one frame to another.
For the current frame, the impact fraction is calculated as a fraction of the total area of the viewport divided by the visible areas of all unstable elements.
A website with a high impact fraction of CLS may have elements that frequently move or shift around as the page loads, causing a poor user experience.
This can occur when images, ads, or other resources are loaded dynamically without reserving space for them in the layout, causing other elements to shift around and disrupt the user’s visual perception of the web page.
An example of this could be a website that displays a banner ad at the top of the page, but the ad is loaded asynchronously, causing the rest of the content on the page to shift downwards.
This can create a poor user experience, as users may accidentally click on the wrong link or button as a result of the layout shift.
Distance Fraction:
Distance fraction of Cumulative Layout Shift (CLS) is a measure of how much the layout of a webpage changes during loading, and how far elements move from their original positions. It is calculated by dividing the total distance moved by all elements on a webpage by the viewport size.
For example, if a webpage has a viewport size of 1000 pixels and the total distance moved by all elements is 200 pixels, the distance fraction of CLS would be 0.2. This means that 20% of the viewport has experienced layout shift.
Distance fraction of CLS is an important metric for website performance and user experience, as layout shifts can cause confusion and frustration for users. A high distance fraction of CLS can indicate that elements on the page are loading and moving around in an unexpected way, causing a poor user experience.
To improve the distance fraction of CLS, web developers can use techniques such as reserving space for elements before they load, loading resources asynchronously, and minimizing the amount of dynamically-injected content.
How to Measure CLS?
You can get lab and field (real-world) data of cumulative layout shift (CLS). Here are a few tools to measure the CLS of the webpage.
Lab Data Tools:
- Chrome DevTools
- Lighthouse
- Page Speed Insights
- Webpage Test
Field Data Tools:
- Chrome User Experience Report
- Google Search Console
- Page Speed Insight
- Web Vitals JavaScript library
Page Speed Insight:
Lab Data of CLS:
Field (Real-world) Data of CLS:
Google Search Console:
GSC provides the information of field CLS data as per Chrome UX report. You should click the Core Web Vital section to find poor and need-to-improvement URLs (web pages).
When you check page-wise, you get the exact CLS score of those affected web pages.
How to Fix Cumulative Layout Shift?
Here are a few steps that could help improve the CLS score.
Use width and height attributes and Aspect Ratio for images and videos:
Images and Video can have a huge impact on CLS, and it causes layout instability if they are placed loosely. To recover this, I recommend adding HTML codes with width an height for images and videos.
<img src="best-dental-hospital-california.webp" width="640" height="360" alt="Dental Hospital California" />
By the above example, you can understand the width and height of the image is 640×360. You can also use an aspect ratio for the image to overcome unstable layouts.
If you do not specify the proper size of the image in the occurrence with layout, Google will warn you of properly size images error.
Reserve space for third-party resources and multimedia before they load.
You can use third-party resources or Ads into your web page view point. These can also cause a poor CLS score. So, it’s better to have a separate space to place these third-party resource and to have a better CLS score less than 0.1
Loading Resources Asynchronously
Loading resources such as images and scripts asynchronously can help prevent layout shifts caused by elements loading at different times. This can be done using the async and defer attributes for scripts and the loading attribute for images.
Minimizing Dynamically Injected Content
Dynamically injected content, such as ads or user-generated content, can cause layout shifts if they are not properly managed. Minimizing the amount of dynamically injected content on a page can help prevent these shifts.
Lazy loading of images
Lazy loading images can help reduce the impact of image-related layout shifts. By only loading images as they are needed, you can prevent the page layout from shifting as images load.
Preloading resources
By preloading key resources, such as fonts and critical images, you can reduce the likelihood of layout shifts caused by elements loading at different times.
Use of CSS Grid Layout
Using CSS Grid Layout can help control the layout of elements on a page and prevent layout shifts caused by elements changing size or position.
Using the new Font-Display Property
The font-display property allows you to control how fonts are loaded and displayed on a page, reducing the likelihood of layout shifts caused by font-related issues.
