Cumulative layout shift (CLS) is a ranking metric rolled out with Google’s Core Web Vitals algorithm update. The overarching goal of the update is to rank pages that are built to optimize user experience. A common and well-known Cumulative Layout Shift includes:
A user goes to a page. On the page, they are enticed with a link and click on it. The page shifts, and the elements move. An ad quickly appears in place of the link, and the user ends up clicking the ad instead.
Feeling hoodwinked by a page that didn’t operate as expected doesn’t make for a great page experience, and Google’s new ranking factors are determined to alleviate it with page stability. If you want your site to stay relevant and worthy of ranking, you need to understand what CLS is, how it works, and how to optimize for it with technical SEO and web development.
What is Cumulative Layout Shift (CLS)
CLS stands for cumulative layout shift, a user-centric performance metric that measures unexpected shifting of web elements that affect the way a user can interact with a page or site. CLS only calculates shifts visible in the viewport—the content above the fold that the user can see.
Elements that may shift may be buttons, fonts, contact forms, videos, images, and other types of content. Content shift generally occurs while a page is still downloading, and the root of it is typically a coding issue that needs to be corrected.
There are expected and unexpected layout shifts. Expected shifts occur in response to an intentional user action—a user clicks on an element like an input field or an icon that expands, etc. Cumulative layout shift ignores all layout shifts that occur within the input exclusion window. The input exclusion window is 500 milliseconds after a user interacts with a page or site.
Unexpected layout shifts occur without the input of a user, and the culprit is typically dynamic content, dimensionless images, or third-party content. While CLS is most likely a benign mistake in coding during development, it can cause frustration and make your site feel untrustworthy, clunky, or broken to a user.
Why Does CLS Happen?
Google noted five key factors as the most common causes for poor cumulative layout shift:
- Images without dimensions: Image size attributions reserve the required space for an image, ensuring that the browser can reserve and allocate the proper space on the page while the image loads. Without proper image dimensions and allocations, the content may appear one way, and then shift when the image fully downloads.
- Ads, embeds, and iframes without dimensions: Similar to images without dimensions, ads, embeds, and iframes without a statically reserved space or slot can shift the content of a page when they load.
- Dynamically injected content: Similar to ads, dynamically injected content can shift a page as a page loads. This type of user interface (UI) content often includes banners, text boxes, calls to action that appear at the top of a page and cause a content shift with the rest of the page.
- Web Fonts causing FOIT/FOUT: Downloading and rendering web fonts may cause a:
- Flash of unstyled text (FOUT) when the fallback font is swapped with a custom font, but the loading mechanism is instructed to display the content as quickly as possible, even if the font is initially rendered incorrectly.
- Flash of invisible text (FOIT) when text excerpts are left with blank fonts until the page has fully rendered making the content visible, causing a delay with other loading elements.
- Actions waiting for a network response before updating DOM: Intentional user actions that trigger layout shifts, such as “load more” or “read more” buttons may cause unexpected shifts to a page when the page undergoes a re-layout paint and composite. Essentially, rather than opening the extended content within the appropriate time of 500ms, the loaded content takes too long, or inappropriately moves other content on the page.
How is Cumulative Layout Shift Calculated?
Google’s original Cumulative Layout Shift calculation focused primarily on impact fraction, adding up the layout shift scores for all animation frames. The formula looked something like this:
Layout shift score #1 + Layout shift score #2 + Layout shift score #3 (etc.) = Cumulative layout shift.
Realizing that this calculation was not a truly comprehensive or fair metric for page stability for long-lived pages—pages that a user has opened for a long time—Google researched and requested feedback to create a better layout shift metric.
Google now uses two factors to calculate cumulative layout shift, impact fraction (the total area impacted) and distance fraction (how far the elements moved), and calculates layout shifts by grouping them into session windows.
A session window is the time frame within the lifecycle of a page when a layout shift occurs. If a layout shift happens, a session window is opened for a maximum of five seconds but may close more quickly if no layout shift occurs within one second of the previous shift.
The new formula to calculate Cumulative Layout Shift is as follows:
Impact fraction ✖ distance fraction = layout shift score for a single animation frame.
The next two sections will describe impact and distance fractions, and how to calculate for them.
Impact Fraction
An impact fraction measures the amount of space an unstable element above the fold takes in the viewport. The impact fraction is calculated using the area of the impact region and the area of the viewport. In simple terms—how much space the element(s) that shifted took up in the viewable area of a page and changed in location.
The impact region is the area/space affected by the layout shift, defined by all of the affected elements from the original to the shifted version. To calculate the impact fraction you must first define the area of the impact region and then use the following impact fraction formula:
Area of impact region ÷ area of viewport = impact fraction.
Distance Fraction
The distance fraction measures the amount of space that a page element(s) moved from the original location to the final position during a layout shift. To calculate the distance fraction, you must first calculate the move distance. The move distance defines the maximum for how far the elements moved during a layout shift.
To calculate the distance fraction use the following formula:
Max move distance ÷ viewport height = distance fraction.
Measuring and Testing Cumulative Layout Shift
CLS testing can be done both in the lab as well as in the field.
Lab Data is gained by using tools that simulate a real online environment. The positive to obtaining and analyzing Lab Data is that no real users can be “harmed” in the process of gathering information and testing. Testing in the lab uses a controlled environment that provides results for a few identified possible situations. To access lab CLS data Google web.dev recommends the following lab performance tools:
A note of caution for lab data: Because lab tools load a page in a synthetic environment, they are only able to measure layout shifts that occur during the page load. This means that any CLS sessions that might occur in the real world after the page load will not be calculated. So, lab data is important and valuable, but it is not comprehensive of a real user experience.
Real User Data is gained from user interactions and experiences in the field. This information is gathered by Google or a third party. This includes JavaScript API and the following Real User Data tools recommended by Google:
- Chrome user Experience Report.
- Page Speed Insights.
- Google Search Console Core Web Vitals report.
- Web-vitals JavaScript library.
Shift Ratings—What is a Good CLS Score?
Google created a pretty easy scoring method to categorize detected CLS shifts to easily see if your shift ratings meet their ranking metric scores.
A good CLS score is 0.1 or less.
A needs improvement CLS score ranges between 0.1 and 0.25.
A poor CLS score is anything above 0.25.
Furthermore, to ensure that this target is met for a majority of your audience a good metric threshold to measure is the 75th percentile of page loads across both mobile and desktop devices. This makes sure that a majority of page experiences meet the target, while excluding any outlier impacts.
How Does Cumulative Layout Shift Affect Your SEO?
Cumulative Layout Shift was incorporated into the ranking factors for Page Experience alongside other updated Google metrics such as Largest Contentful Paint and First Input Delay.
CLS is weighted at 15% against other ranking factors in Lighthouse Performance scoring, provided by Google Developers (though it should be noted that scoring weights are subject to change as Google continues to tune their metrics). CSL plays a role in how Google views your pages and site when comparing them to your competitors and could impact the organic traffic you receive.
Additionally, optimizing for CLS should be a major priority for the efficiency, effectiveness, and experience of your site specifically for your users and potential customers. A poor CLS score may indicate that your page is not easy to navigate or browse, and may turn away that valuable traffic and potential customers you worked so hard to earn.
How to Improve and Optimize CLS
The following sections provide a few key opportunities to improve and optimize your pages and site for Cumulative Layout Shift.
Fonts, FOIT, and FOUT Optimization
Using specialized or web fonts can cause a flash of invisible text (FOIT), or flash of unstyled text. These occurrences may be disorienting to the user and trigger a Cumulative Layout Shift as the browser works to render and repaint the page.
There are a few FOIT and FOUT mitigation techniques for CSS and JavaScript which may include:
- Reducing the file size.
- Using the CSS “font-display” property.
- Using Font Preloading to download fonts as an initial priority.
There also may be opportunities to manage font display values with a swap or fallback option that allows the font to load in its original text and then swaps the font after 100ms.
Video and Image Layout Optimization
Optimize images and videos by allocating the appropriate amount of space. Utilizing aspect ratios allows the browser to calculate and reserve the appropriate amount of space for an image or video while loading the page. A few simple ways to do this include Aspect Ratio Boxes and the Aspect Ratio Calculator.
Dynamically Injected Content Optimization
First and foremost, content should never be inserted over existing content unless prompted by user interaction (an expected shift). If you plan to include helpful user interface content such as banners, forms, buttons, etc, be sure to include them below the fold and in a space that doesn’t or shift content on a loaded page.
Ads Layout Optimization
Ads may trigger CLS, and one of the best ways to manage them is to style and constrain them in a designated space with a specific height and width. If the element you create for ads does not populate with an ad from your ads inventory, you can set an alternative image or banner ad is used as a placeholder.
Animation and Transition Optimization
Some animations and transitions may trigger a layout shift while others do not. Google recommends transforming animations to animations of properties that may trigger layout changes. Transitions should be animated in a way that provides context and continuity to the user from state to state.