User experience is critical to the success of any website. It relates to how users perceive and interact with a website, including its design, functionality, and usability. A positive user experience can increase engagement, conversion rates, and customer satisfaction.
However, a poor user experience can result in high bounce rates, decreased conversions, and a negative brand image. And it can also hurt your website’s search engine ranking. Google considers user experience, specifically “Core Web Vitals,” part of its ranking algorithm. This is where Cumulative Layout Shift (CLS) comes into play.
CLS is a user-centric metric that measures visual stability on a website. In simpler terms, it quantifies how much the page layout shifts as it loads. A high CLS score means that elements on the page are shifting and moving around as users try to interact with them, causing frustration and a poor user experience, and hurting the website’s ranking. In contrast, a low CLS score indicates that the page layout is stable, and users can easily interact with the elements without any unexpected changes.
How Is It Measured?
CLS is measured using a metric called CLS score, which is calculated by multiplying the impact fraction by the distance fraction. The impact fraction represents the proportion of the viewport affected by layout shifts, while the distance fraction measures the maximum distance any element has shifted from its original position.
To put it into context, let’s say you’re trying to click on a button on a website, but as the page loads, an image above the button suddenly shifts down, causing you to accidentally click on a different link. This would result in a high CLS score because both the impact fraction and distance fraction are affected.
On the other hand, if all elements on a webpage load smoothly without any changes in position or size, it would have a low CLS score.
What’s A Good CLS Score?
A good CLS score is anything below 0.1, meaning less than 10% of the viewport has been affected by layout shifts. Anything above this indicates room for improvement and could negatively affect user experience and search engine ranking. For example, suppose your website has a CLS score of 0.25. This means that 25% of the page layout shifts during loading, which can frustrate users and hurt your website’s performance.
What Causes Poor CLS Scores?
There are various reasons why a website may have a poor CLS score. Some common causes include:
- Images, videos, or ads without dimensions: If these elements do not have specific height and width measurements, they can cause layout shifts as they load and adjust to their actual size.
- Dynamically injected content: Content added to the webpage after it has loaded can cause shifts in the page layout, especially if it is placed above or near existing elements.
- Web fonts that cause a flash of invisible text (FOIT) or flash of unstyled text (FOUT): If web fonts do not load at the same time as other content on the page, users may see a momentary shift as they are applied to the text.
- Slow-loading resources: If resources such as images or videos take a long time to load, users may start interacting with the page before these elements have fully loaded, causing shifts in the layout.
- Third-party scripts: External scripts, such as those for social media or analytics, can also contribute to layout shifts if they load after the page has already been rendered.
Why You Should Care
Cumulative Layout Shift is an essential metric for website owners and developers to track because it directly impacts user experience, search engine ranking, and, ultimately, business success. The following are some reasons why you should care about your website’s CLS score:
A High CLS Is As Frustrating As Hell For Users
Imagine navigating a website where the buttons keep moving, and you accidentally click on something you didn’t intend to. For example, say you’re trying to add an item to your cart, but as the page loads, the button moves down, and you unintentionally click on a link that takes you to another page. Chances are, you’ll get frustrated and leave the website altogether. This not only results in a lost potential customer but also negatively impacts your brand’s image.
Users expect websites to be intuitive and easy to navigate, and a high CLS score goes against this expectation.
Your Users Will Hate How Your Site Loads
Users are impatient and expect websites to load quickly. A high CLS score can significantly slow down the loading process, as elements keep shifting around, causing delays in users being able to interact with the page correctly. Slow loading times typically lead to high bounce rates, meaning users leave your website without exploring further. This not only hurts your engagement but also negatively affects your search engine ranking.
Google Won't Send As Many Of Their Users To You
As mentioned earlier, Google considers user experience as part of its ranking algorithm. If your website has a high CLS score and provides a poor user experience, it is less likely to rank well on search engine result pages (SERPs). This translates to lower organic traffic and fewer potential customers visiting your site. Additionally, CLS is one of the three Core Web Vitals directly impacting your website’s ranking. Keeping a low CLS score not only improves the user experience but also helps improve your SEO.
CLS Is One Of The Three Metrics Of The Core Web Vitals
The Core Web Vitals are a set of metrics that Google uses to assess and measure user experience on websites. The Core Web Vitals were first announced in May 2020 and officially rolled out as part of Google’s ranking algorithm in June 2021. Google is constantly updating and refining its algorithm to provide the best possible user experience, and Core Web Vitals are a significant part of that.
What Are The Other Two?
The other two Core Web Vitals are Largest Contentful Paint (LCP) and First Input Delay (FID). LCP measures the amount of time it takes for the largest element on a website to load, while FID measures how long it takes for a webpage to become interactive. These three metrics work together to provide a comprehensive understanding of user experience on a website.
Largest Contentful Paint (LCP)
LCP is a user-centric metric that measures how long it takes for the largest element on a webpage to load. The largest element is usually an image or video, but it can also be a large block of text or any other prominent feature on the page. LCP measures the time from when a user requests a page until the largest element is fully visible and interactive. A good LCP score is anything under 2.5 seconds, while a poor score would be over 4 seconds.
First Input Delay (FID)
FID is another user-centric metric that measures the time it takes for a webpage to become interactive. It measures the time from when a user first interacts with a page (e.g., clicking on a button or link) until the browser responds to that interaction. A good FID score is anything under 100 milliseconds, while a poor score would be over 300 milliseconds.
Impact Of CLS On Core Web Vitals
Although CLS is one of three Core Web Vitals that directly impact user experience on a website, it is considered the most important because it is the most noticeable annoyance for users. While slightly slower loading times may go unnoticed, a constantly shifting layout can be frustrating and disruptive to a user’s browsing experience. Even if a website has perfect scores for LCP and FID, a high CLS score can still result in a poor overall user experience.
On the other hand, if a website has slightly lower scores for LCP and FID but an excellent CLS score, it is more likely to provide a better user experience. This highlights the importance of keeping a low CLS score and prioritizing it among the three Core Web Vitals.
What Are The Testing Sites Looking For?
Before diving into improving your CLS score, it’s essential to understand how websites like Google and PageSpeed Insights measure CLS. These testing sites look for visual stability on a webpage by comparing frames at specific periods during the page loading process. If the elements on the page move by a certain threshold, it is considered an unexpected layout shift, and points are deducted from the CLS score. This means that even minor layout shifts can significantly impact your overall score.
The following are some of the specific ways that Google and PageSpeed Insights assess CLS:
Checking The Impact Fraction
To measure CLS, Google and other testing sites use a metric called impact fraction. This fraction is calculated by multiplying the distance of the unexpected layout shift by the area affected. A higher impact fraction translates to a lower CLS score and vice versa. To improve your CLS score, it’s crucial to understand which elements on your webpage are causing significant shifts and work on reducing their impact fraction.
Checking The Distance Fraction
Another metric used to measure CLS is the distance fraction. This fraction calculates the distance an element moves during a layout shift by the size of the viewport (the visible area of a webpage). A larger distance fraction means a higher impact on user experience and, therefore, a lower CLS score. You need to minimize how much elements move during page loading to improve this metric.
Calculating Layout Shift
Google calculates the layout shift by looking at every unexpected layout shift that occurs during page loading and assigning it a score based on its impact fraction. The sum of all these scores is then divided by the number of unexpected shifts to get the overall CLS score. This means that reducing even one significant layout shift can have a considerable impact on improving your overall CLS score.
Calculating Cumulative Layout Shift
Google calculates the CLS by looking at every unexpected layout shift that occurs during page loading and assigning it a score based on its impact fraction. The total sum of all these scores is then divided by the number of unexpected shifts to get the overall CLS score. This means that reducing even one significant layout shift can have a considerable impact on improving your overall CLS score.
To get a better understanding, let’s look at an example: Say your webpage has two unexpected layout shifts during page loading, one with an impact fraction of 0.1 and the other with an impact fraction of 0.5. This would give you a total CLS score of (0.1 + 0.5)/2, which is 0.3. This means your webpage has a moderate CLS score and would benefit from reducing layout shifts to improve user experience.
Most Tools Are Using Lab Data, Not Real World Data
While testing sites like Google and PageSpeed Insights use algorithms to simulate user experience and measure CLS, most tools rely on lab data rather than real-world data. This means the results may not accurately reflect your users’ actual experience on your website. It’s essential to regularly monitor and optimize for CLS using both lab and real-world data to ensure a good user experience.
For example, even if your website has a low CLS score in lab data, real users may still experience unexpected layout shifts due to varying internet speeds and device capabilities. By incorporating real-world data into your optimization process, you can ensure your website provides a stable and visually pleasing experience for all users.
What Is Lab Data?
Lab data refers to testing environments that simulate user experiences on a website. These simulations use algorithms to analyze the performance of a webpage and provide optimization suggestions. Lab data is useful for identifying potential issues and areas for improvement but may not accurately reflect real-world usage.
What Is Real World Data?
Real-world data, or field data, comes from actual user experiences on your website. This data is collected through tools that track and analyze user behavior, such as Google Analytics and PageSpeed Insights Real User Monitoring. Real-world data provides more accurate insights into how your website performs for real users and helps prioritize optimizations to improve overall user experience.
How Do You Fix It?
The first step to improving your CLS score is to hire a skilled developer who understands web performance and optimization. They can identify the root causes of unexpected layout shifts and implement solutions to reduce their impact. Additionally, tools like Google Search Console and PageSpeed Insights can provide valuable insights concerning areas that need improvement.
- Optimize images and videos: Large images and videos are significant contributors to CLS, especially on mobile devices. Properly optimizing these media elements by using the correct sizes and formats can significantly reduce their impact fraction and improve your CLS score.
- Avoid adding new elements during page loading: One of the main causes of unexpected layout shifts is adding new elements to a page during or after loading. These additions can cause other elements to shift, resulting in a higher CLS score. To avoid this, it’s best to add new elements only after the page has finished loading.
- Incorporate preloading and lazy loading: Another way to reduce unexpected layout shifts is by using preloading and lazy loading techniques. Preloading ensures that resources are loaded before they’re needed, while lazy loading allows non-critical resources to load after the page has already been rendered. These techniques can significantly improve CLS by reducing the impact of delayed loading on user experience.
Let Us Help You Optimize Your CLS Today
CLS is an essential metric for measuring and improving website performance. Understanding how it’s calculated and taking steps to reduce unexpected layout shifts can ensure a stable and visually pleasing experience for all your users. Always remember to use both lab and real-world data while optimizing for CLS to get a comprehensive understanding of your website’s performance. With the right tools and techniques, you can improve your CLS score and provide a positive user experience for all visitors to your website.
Contact us at Paradox Marketing today to learn more about improving your website’s performance and user experience. We can provide personalized solutions to help you achieve a low CLS score and create a seamless browsing experience for your users.
