Cumulative Content Shift (CLS): Definition, Score, and Other
Cumulative Layout Shift (CLS) isn't just an obscure technical term; it represents the stability of a web page's layout during loading, guarding against those exasperating and unexpected content shifts.
In this article, we will explore its definition, scoring mechanism, the most effective strategies for optimization, and how you can ensure its performance through site audit with Sequence Stats. Let’s get started!
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift, often abbreviated as CLS, is one of the Core Web Vitals introduced by Google to assess and improve user experience on the web. CLS quantifies the visual stability of a web page as it loads. It measures the extent to which page content shifts unexpectedly during the loading process. These shifts can be caused by elements like images, ads, or dynamically injected content that affect the layout.
CLS is particularly important because it directly impacts the user's experience. When content suddenly moves on a page, it can lead to accidental clicks, disrupted reading, or a general sense of frustration, resulting in a poor user experience.
Google and other search engines now consider CLS as a key metric for determining the quality of a website's user experience.
How is Cumulative Layout Shift Scored?
CLS is measured using a scoring system that reflects the degree of layout shifts on a web page. The score is calculated by multiplying the impact fraction and distance fraction, which are defined as follows:
- Impact Fraction: This represents the proportion of the viewport (the visible part of the web page) affected by layout shifts. In other words, it measures how much of the page's visible area is involved in the shifts.
- Distance Fraction: This measures how far the displaced elements move. It calculates the maximum distance (in pixels) between the starting and ending positions of these elements.
The CLS score is calculated continuously as the page loads, and the final score is the sum of all the individual scores over time. The goal is to keep the CLS score as close to zero as possible, indicating a stable and user-friendly page layout.
Below are how the CLS score is seen in the report:
1. Good CLS Score
A "good" CLS score typically represents a value under 0.1. This means that the web page is exceptionally stable during loading, and users experience minimal to no unexpected content shifts.
In terms of user experience, a good CLS score ensures that visitors can read and interact with the content without disruptions, making for a pleasant and frustration-free browsing experience.
From an SEO perspective, a good CLS score can positively impact your website's search engine rankings. Search engines prioritize user experience, and a stable layout contributes to higher user satisfaction.
2. Needs Improvement CLS Score
A "needs improvement" CLS score typically falls between 0.1 and 0.25. While not terrible, it indicates that there's room for enhancing the layout stability during page loading. Users may encounter some content shifts, which can be slightly disruptive but generally manageable. However, addressing this score can lead to a smoother experience.
SEO-wise, a CLS score in this range suggests that your website's user experience could be more competitive. Improving CLS can help you edge ahead in search engine rankings.
3. Poor CLS Score
A "poor" CLS score exceeds 0.25, signifying significant and frustrating content shifts during page loading. Users often find poor CLS scores highly disruptive and bothersome. Content jumping around the screen can lead to accidental clicks, decreased user engagement, and an overall negative experience.
SEO impact for a poor CLS score can be severe. Search engines aim to provide the best user experience, and a poor CLS score might lead to lower search engine rankings and decreased organic traffic.
Optimizing for Cumulative Layout Shift
Optimizing for Cumulative Layout Shift (CLS) is essential for creating a stable and user-friendly web experience. Below is the explanation of each strategy used to improve the CLS score:
1. Identify Where The Shift is Coming From
To optimize CLS, it's crucial to pinpoint the elements causing layout shifts. These shifts can be caused by images, videos, ads, or dynamically injected content. Use browser developer tools and web performance monitoring tools to identify these problematic elements.
Once you've identified the issue, you can work on addressing each specific issue to reduce layout shifts.
2. Define Your Images and Video Dimensions
Many layout shifts are triggered by images and videos that don't have predefined dimensions in the HTML. This causes the browser to allocate space for these elements, leading to shifts when they load.
To optimize CLS, specify the width and height attributes in the HTML for all images and videos. This reserves the necessary space for these elements, preventing content shifts as they load.
3. Setting Banner Ads Width and Height
Banner ads, particularly if they are served from external sources, can contribute significantly to layout shifts. These ads often load asynchronously, and their dimensions may not be known in advance.
To handle CLS issues, ensure that banner ads have predefined width and height attributes in the HTML. This allocates space for the ads, avoiding sudden shifts when they load. If possible, work with ad providers to deliver ads with known dimensions.
4. Reviewing Dynamically Injected Content
Dynamically injected content, such as pop-ups, chat widgets, or social media widgets, can be a source of layout shifts. This content often loads after the initial page rendering and can push existing content down or aside.
To optimize CLS, review the implementation of dynamically injected content. Ensure that it doesn't disrupt the existing layout excessively. Consider implementing these elements in a way that minimizes their impact on the overall page layout.
5. Conduct Site Audit
After having the optimization, you need to ensure that the score is improving. To do that, you can conduct a site audit using Sequence Stats and see whether the CLS score is good enough.
Go to Sequence Stats Site Audit and set an audit for your desired domain. Next, the system will automatically turn you the result.
 |
|---|
| Picture 1 - Site Audit in Sequence Stats using Lighthouse. |
By addressing these issues, you can reduce the cumulative layout shifts on your website, providing a more stable and user-friendly browsing experience. This, in turn, not only improves user satisfaction but can positively impact your website's SEO performance, as search engines prioritize user experience in their ranking algorithms.