What is CLS?
Cumulative Layout Shift (CLS) is a measure of a website’s instability. This measure determines whether a website behaves as the user expects it to behave.
One of the most frustrating aspects of an unstable website is that the page’s content shifts as the user views it. On top of the annoyance factor, it can also cause unexpected behavior. Sometimes the effect of the shift is benign. All the user has to do is locate their spot on the page again to continue viewing.
At other times, the effect can be noticeably worse. For example, a user might expect to click on a button or a link, but before they reach the link or button, the elements shift on the page as they do so. If the user expects to cancel an order, but the page shifts as they are about to press CANCEL, they may end up clicking ORDER NOW. They can also click on an ad when they did not want to because of a shift in the display. If this action takes users away from your site, they may decide not to return. These types of behaviors are highly frustrating to users. But as a website owner, it could turn potential clients away or, worse, turn them against you.
How is CLS measured?
Cumulative Layout Shift occurs when a page’s structure shifts unexpectedly. If a user clicks on a link or a button, there is an expectation that the page layout may change. It could be because the page will load new artifacts or a new calculation add or modify elements on the page.
Whenever a user interacts with the website, Core Web Vitals (CWV) allow for a 500 ms grace period before recalculating the cumulative layout shift score. This grace period does not apply to scrolling.
The CLS score consists of two measurements: the impact fraction and the distance fraction. The impact fraction measures the effect of an unstable element (an element that moves on screen) on what the user sees (the viewport).
In the example below, if a text element starts by taking up 25% of the screen but then moves to take up 80% of the screen, the impact fraction is 0.80.
The second measure that affects cumulative layout shift is the distance fraction. This value measures how far the element moves on the screen and its impact on the viewport. In our example, the same text element moved to about 55% of the screen.
The final CLS score is: impact fraction × distance fraction.
For our example, impact and display fractions are 0.8 × 0.55, for a score of 0.44.
What is a good CLS score?
Like most user-centric Core Web Vitals, a good Cumulative Layout Shift indicates a high-quality user experience. Google wants your CLS to be less than 0.1.
- Great = less than 0.1
- Needs improvement = between 0.1 and 0.25
- Poor = more than 0.25
What contributes to a poor CLS score?
Poor CLS scores occur when the browser must calculate all of the elements’ positioning on the screen. Without proper hinting, the browser may receive the information late in the parsing. This causes the rendering to change, shifting the content in the viewport.
The more work the browser has to do and the less rendering information it knows ahead of time, the higher the probability of elements shifting on the page. The following page elements may contribute to a poor CLS score:
- Images do not specify width and height, and expect the browser to do all the work. In this case, the browser does not allocate space until the image size is fully known, which may cause a redraw.
- Any ad, iframe, or embedded element that does not specify the size.
- New dynamic content is inserted above the current viewport, for which no screen size has been provided before rendering.
- Dynamically loaded fonts can change the rendering behavior.
- Animations loading after the page has been rendered.
In short, anything that is rendered late and requires new size calculations from the browser may cause the content to shift and thereby lower the Cumulative Layout Shift score.
How can you improve/optimize CLS on your site?
As a general rule, follow these recommendations to reduce the amount of shifting on screen:
- Provide sizes for elements that support sizing for proper rendering.
- If you do not know the exact size of the elements, allocate screen real estate that can fit the largest possible piece.
- Display dynamic content that could change the rendering below the fold (the first screen) or below the current viewport. If shifting occurs, the user will not be affected.
- Make sure that your ad partners provide all of the specs you need to reduce any layout shifting.
- Avoid web fonts that change the look of the page after it has been loaded.
You can measure your CLS score in more detail using:
It’s worth investigating and improving your CLS score. Starting in May 2021, if you haven’t taken care of site issues, current high-ranking pages may rank lower in search engine results pages.
Where can I find more information?
For more information to help improve your CLS score, visit the web.dev site.