FEATURE ALERT: Combine data from multiple clients, brands, or locations into one clear view.

KPI ExamplesCumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS)

Cumulative Layout Shift is a critical metric used to assess the stability of a webpage as it loads. It quantifies the frequency and magnitude of unexpected shifts in the page's layout, which often occurs when elements load asynchronously.

CLS

User Experience Monitoring

Identify and fix issues that disrupt the webpage's layout to ensure a smoother browsing experience.

SEO Optimization

A lower CLS score leads to better search engine rankings and an overall better SEO score.

Troubleshooting Strategy

Identifies pages with high CLS for targeted improvements, pinpointing elements causing layout shifts.

A/B Testing Analysis

Use A/B testing to determine which webpage layout offers the most stable user experience.

Prioritizing Visual Stability

Why Cumulative Layout Shift Is Important

Cumulative Layout Shift aims to provide a seamless and user-friendly web experience. CLS measures the visual stability of a webpage, specifically tracking the unexpected layout shifts during loading.

Search engines like Google consider CLS as a ranking factor part of their Core Web Vitals. Websites with low CLS scores tend to rank higher, attracting more organic traffic and potential customers. So, a favorable CLS score ensures users have a smooth website journey, ultimately contributing to higher Engagement and longer Page Sessions.

Reporting on Cumulative Layout Shift

Google Lighthouse Dashboard Example

Dive into the Google Lighthouse Dashboard in AgencyAnalytics for an intuitive understanding of CLS. This metric is part of Google's Core Web Vitals, including Largest Contentful Paint and First Input Delay (FID). These website optimization metrics are vibrantly displayed alongside SEO, Best Practices, and Accessibility scores for a big-picture overview. Go a step further by including side-by-side marketing data from over 80 platforms and counting. From detailed annotations to white labeling, there's a wealth of customization options in just a few clicks.

See Dashboard Start Free Trial

Related Integrations

Google Analytics 4

Automated Moz Dashboards & Reports from AgencyAnalytics

Moz

Ahrefs

Helpful Tips

How To Improve Cumulative Layout Shift

Improving CLS is crucial for a better user experience and higher SEO rankings. Here are three handy tips to reduce it.

Improve Font Loading

Choose a fallback font that closely matches the primary font's size and style. This prevents layout shifts while the main font is loading.

Plan for Dynamic Content

Pre-allocate space for dynamic content like pop-ups. Load them when the page is idle to prevent shifting other page elements.

How To Create a Winning SEO Proposal (Plus, a Free Template)

Want to get more new clients? Put some extra effort into your SEO proposal! Here's what to include in your next proposal, so you can close every deal! Bonus: download our free proposal template for a great starting point.

An Agency Guide to Google Lighthouse and Lighthouse Analytics

A Complete Guide to Google Lighthouse

Master the art of website optimization with Google Lighthouse. Uncover tips, metrics, and techniques to enhance web performance in this comprehensive guide.

How To Create Perfect SEO Reports for Your Clients Every Time

How To Quickly & Easily Create SEO Reports for Clients

The anatomy of a perfect SEO report can seem like a mystery, even for the most seasoned marketing agencies. Let's look at how SEO reporting keeps track of your agency’s efforts and makes sure your SEO doesn’t hit the fan–so to speak.

We’re saving at least 50+ hours each month with automated reporting, although it’s probably much higher. We’re looking to grow our agency to 250+ clients, and we wouldn’t be able to do that without having a scalable solution like AgencyAnalytics.

Layne Sparks

AgencyAnalytics, and its ability to culminate data from different platforms and software, is a must-have for all agencies. It makes reporting and communication seamless and ensures transparency. AgencyAnalytics is a major part of how we promote and differentiate ourselves.

Gabriela Paiva / Marketing Manager

See More KPI Examples

FCP

First Contentful Paint (FCP)

First Contentful Paint (FCP) is a metric that gauges the time taken from the start of loading a page to the appearance of the first content on the screen (e.g., text, images).

See how 7000+ marketing agencies help clients win

Start Your Trial Now

Free 14-day trial. No credit card required.

Stop Wasting Time on Reports. Get Marketing Insights Faster & Drive Results.

Build Custom Marketing Dashboards in Minutes

CLS in the Metrics Ecosystem

How Cumulative Layout Shift Relates to Other KPIs

A high CLS often leads to increased Bounce Rates and reduced Average Session Duration. That’s because users tend to leave websites with a disjointed browsing experience. This correlation highlights the need for a stable and smooth user interface to retain visitor attention.

Additionally, CLS has a significant influence on Conversion Rates. Websites with low CLS scores typically see higher Conversion Rates, as a stable layout encourages visitors to complete actions (e.g., making an online purchase).

Search engines also favor websites with low CLS, which may improve search rankings. This interplay underscores CLS's importance in a comprehensive marketing strategy since it affects the user experience and other outcomes.

Strong Web Stability

Key Elements Impacting Cumulative Layout Shift Score

To address Cumulative Layout Shift, start by understanding the causes of unexpected layout shifts during page load. These layout shifts often disrupt the user experience and negatively impact the CLS score.

A lack of image dimensions and aspect ratios often leads to unexpected layout shifts. When these dimensions and ratios aren’t defined, the browser can’t allocate the correct space until the media loads. Another contributing factor is the use of web fonts that cause the flash of unstyled text (FOUT) or invisible text (FOIT).

A delay in web font loading leads to layout shifts, so consider using a faster-loading fallback font that closely matches the chosen font. Dynamically injected content (like ads or responsive images) may also lead to an unexpected layout shift.

Formula

How To Calculate Cumulative Layout Shift (CLS)

To calculate Cumulative Layout Shift, track all the times parts of a webpage move unexpectedly while someone is using it. Each movement gets a score based on how much of the screen they affect and how far they move. The total CLS is the sum of these scores, showing how stable or unstable the webpage is as it's being used.

CLS is usually calculated through specialized tools like Google Lighthouse and Google PageSpeed Insights, considering these two key elements:.

Impact Fraction: Measures the area of the viewport that's affected by the shift.

Distance Fraction: Measures the distance each unstable element has moved relative to the viewport.

The Cumulative Layout Shift is the sum of all individual layout shift scores that occur during the entire lifespan of the page. However, it's important to note that layout shifts that occur in response to user interactions (like clicking a button that dynamically loads content) are not included, as these are considered expected shifts.

Cumulative Layout Shift Formula Example

CLS Score

Impact Fraction

Distance Fraction

What Is a Good Cumulative Layout Shift?

A good average CLS is generally considered to be 0.1 or below. This low score indicates a stable, user-friendly website where content remains largely static as the page loads, minimizing disruptions in the browsing experience.

Achieving such a score usually involves meticulous design and development practices. These include specifying image sizes and avoiding content that shifts existing elements. A CLS score in this range positively influences SEO rankings and results in a professional-looking website.

What Is a Bad Cumulative Layout Shift?

A bad average CLS score is typically above 0.25 and signals significant webpage instability. Such shifts can be caused by unoptimized image loading, ads that suddenly expand, or any content that displaces existing elements.

These abrupt changes lead to a poor user experience and lower search rankings. Websites with consistently high CLS scores should identify underlying issues, focus on optimizing content stability, and provide a better overall user experience.

How To Set Cumulative Layout Shift Benchmarks and Goals

Creating benchmarks and goals for CLS involves a structured approach. First, conduct an initial website assessment using tools like Google Lighthouse.

Set a realistic benchmark for expected layout shift based on industry standards (e.g., a CLS score below 0.1). Then, identify the specific elements causing layout shifts, such as images without dimensions or dynamically injected content. Establish clear goals to reduce these shifts, like optimizing image sizes, preloading key assets, or implementing more stable loading sequences.

Regularly monitor the CLS score and adjust strategies as needed. Collaborate with web developers to implement changes and improve performance.

Stability Speaks Volumes

Why Cumulative Layout Shift Matter to Clients

For clients, Cumulative Layout Shift is a reflection of user experience and brand perception. A low number of unexpected layout shifts means a stable, user-friendly website, crucial for maintaining customer trust and satisfaction.

Clients should view CLS as a key indicator of their website's quality and effectiveness in delivering a positive user experience. It's not only about keeping the content visually stable. It’s also about providing a seamless and enjoyable website interaction, which leads to a more favorable brand perception.

Beyond Pixels and Code

Why Cumulative Layout Shift Matters to Agencies

For agencies, CLS demonstrates technical proficiency and strategic insight. A focus on minimizing unexpected layout shifts showcases an agency's commitment to crafting high-quality digital experiences.

Agencies use CLS as a benchmark to optimize website performance, which is integral for client satisfaction and retention. Prioritizing CLS means an enhanced user experience and a strengthened portfolio with high-performing, stable websites. Therefore, this metric demonstrates an agency’s capability to deliver technically sound websites.

Better User Experience

Fixing Common CLS Problems

To fix Cumulative Layout Shift, reserve space on web pages to support dynamic ad sizes or load it in a way that doesn’t disrupt existing content. When there’s user input on a web page (e.g., filling out a form), improper planning can lead to unexpected layout shifts. Properly managing JavaScript and CSS animations is crucial for maintaining a stable page load experience.

Use tools to regularly monitor layout shifts (along with other Core Web Vitals) to optimize the user experience and address any issues.

KPI Definitions - Other Factors to Consider

Save Time and Money by Automating Your Client Reporting

Start Your Free Trial Today

Best Practices When Analyzing and Reporting on Cumulative Layout Shift

Understanding the nuances of CLS enables targeted optimizations that significantly impact campaign effectiveness and ROI. Here are six actionable tips to enhance CLS reporting.

Highlight Baseline Scores

Present the initial measure of unexpected layout shifts as a baseline. This sets a clear benchmark for measuring improvements.

Show Improvement Over Time

Include a timeline showing an improvement in the number of unexpected layout shifts. This demonstrates the direct impact of ongoing or completed work.

Segment Data by Page Type

Break down CLS scores by different page types (like home, product, or landing pages). This specificity helps identify which pages need more attention.

Compare Before and After

Show a before-and-after comparison of CLS scores for each significant update. This highlights the effectiveness of specific changes.

Detail Contributing Factors

Identify what elements contributed most to layout shifts (like images, ads, or fonts) and discuss how they were addressed.

Relate to User Experience

Explain how improvements in CLS scores positively affect user experience, Engagement, and Conversion Rates. Include a report on Core Web Vitals to show overall website performance.

Set fixed image dimensions or the same aspect ratio to avoid layout shifts. Preload key images to enhance user interaction.

The dashboard setup is intuitive, easy, and looks great once it’s set up. Managing multiple clients gets tricky but having a dashboard for each client where you can easily see a snapshot of almost all analytics, rankings, social performance, growth, etc. AND be able to dig deeper is exactly what I’ve been looking for.

Brittany Butler

The Nunnely Group

LCP

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures the time it takes for the main content of a web page to load and become visible to the user.

Conversion Rate

Conversion Rate measures the percentage of leads or visitors to a website or application who take a desired action, such as making a purchase or filling out a form.

Engagement Rate

Engagement rate is a measure of how many people interact with specific content.

Average Time on Page

Average Time on Page measures the average time users spend on a specific page of a website.

Average Session Duration

Average Session Duration measures the average length of a visitor's stay on a website, indicating user engagement and content effectiveness.

Build Website Usability Reports That Deliver Results

Save time and impress clients with a powerful, results-driven report template.

Access the Free Core Vitals Report Template