Some websites are just frustrating to visit, especially when they have content that starts rearranging on its own. You end up losing where you’re looking at, or worse, clicking something you didn’t intend to. It’s a good thing that Google included Cumulative Layout Shift (CLS) in Core Web Vitals (CWV) so leading search engines prioritize showing websites with minimal layout shifts.
To help you learn more about CLS, this article covers what it is, how it’s related to Core Web Vitals, how it’s measured and monitored, and its overall impact on your website’s search rankings and user experience.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) refers to the unexpected shuffling or rearrangement of web page elements (images, ads, dynamic content) during loading time. It’s one of the three key metrics in Core Web Vitals (CWV) that focuses on measuring your website’s visual stability. CLS assesses disruptive layout shifts that your users experience while navigating through your website.
Search engines nowadays prioritize user-centric metrics, so CLS goes beyond ensuring that your page layout is aesthetically pleasing. Significantly minimizing layout shifts gives you a low CLS score, which makes your website rank higher in search results. Users are also more likely to stay on your website, increasing session durations, user retention, and eventually leads to higher conversion rates.
CLS in Core Web Vitals
CWV is a set of metrics made by Google that assesses various aspects of web performance in user experience. CLS is one of its three main components, while the others are Largest Contentful Paint (LCP) and First Input Delay (FID), which is set to change to Interaction to Next Paint (INP) in March 2024.
While CLS addresses visual stability and predictability, LCP focuses on the loading speed of the main content, and FID (or INP in the near future) measures your website’s responsiveness to user interactions. All these three metrics together provide a comprehensive insight on how your site is performing and which areas need improvements.
Focusing on CLS alone will not be enough to maximize your website’s performance. You have to understand how it works in conjunction with LCP and FID/INP since search engines look at your website’s CWV as a whole. It’s your overall CWV score what determines how great your user experience is and how high you’ll rank on search engines.
What Causes Cumulative Layout Shifts?
Adding visual elements to your websites such as images, dynamic content, or ads can definitely make it stand out and monetize your traffic. However, these can be the main culprits that can disrupt the initial layout of your page and the user experience.
See this sequence below. That’s a good example of a poor CLS disrupting the user experience:
In the sequence, you can appreciate how the user attempted to accept the payment but right in the exact moment when the Accept button was going to be clicked, an additional element was loaded on the page, moving all content down. This made the user interact with the wrong button, leading to an unwanted result.
Here are some common scenarios that cause Cumulative Layout Shifts:
Images without Dimensions: Unspecified image dimensions can lead to unexpected shifts as the browser allocates space based on available information.
Ads and Iframes: Unsynchronized loading of ads and iframes, without proper dimension definitions, may push existing content, causing layout shifts.
Dynamic Content: Content that dynamically loads or changes after the initial render can contribute to layout shifts. These are elements that can change or update in real-time based on user interactions, preferences, or external factors.
Delayed Loading of Elements: Slow-loading elements, especially images, also impacts layout stability.
Viewport Changes: Resizing the viewport or changing device orientation can trigger layout shifts, especially without proper responsive design.
Websites with poor layout stability may have added or modified one or two of the above factors. These needs to be revisited and worked on.
Recommended Cumulative Layout Shift
To ensure an ideal user experience, Google urges your website to maintain a CLS score of 0.1 or lower. Google has a CWV guideline that classifies CLS scores into the following:
- Good CLS: A CLS score of 0.1 and below indicates minimal layout shift and is considered “good”, reflecting a stable and user-friendly browsing experience with fewer disruptions.
- Poor CLS: A CLS score above 0.1 is considered “poor”, signifying a potentially disruptive page layout.
Measuring and Monitoring CLS
On top of looking into the possible causes of high CLS and understanding the recommended threshold, learning what tools to use (and eventually how to utilize them) will provide you a more solid insight on improving a poor LCP.
These are the most common tools and techniques on how you can measure and monitor your website’s CLS:
Chrome DevTools 
- What’s it for: A built-in developer tool for Google Chrome
- How to use it: Access the “Performance” tab to record. Analyze a performance trace, specifically observing “Layout Shift” in the “Experience” section to measure CLS over time.
Lighthouse Reports 
- What’s it for: An open-source tool for evaluating webpage performance (real-world and lab data).
- How to use it: Generate comprehensive reports that include CLS scores either through Chrome DevTools or online tools, for assessment and optimization.
PageSpeed Insights 
- What’s it for: PageSpeed Insights analyzes webpage performance using real-world and lab data.
- How to use it: Access lab data from the Chrome User Experience Report via API. Examine aggregated CLS data derived from actual users’ experiences.
Google Search Console 
- What’s it for: Google Search Console provides insights into a website’s performance on Google Search.
- How to use it: Navigate to the “Core Web Vitals” report under “Enhancements”. Review CLS data specific to the pages on your website.
JavaScript Libraries 
- What’s it for: JavaScript libraries, like CumulativeLayoutShift.js, enable programmatic tracking of CLS.
- How to use it: Implement these libraries to gather detailed information about layout shifts. This helps in debugging and improvement efforts for CLS measurement.
Regularly monitoring CLS, especially after implementing changes to the website, ensures consistent improvements over time.
Importance of Maintaining a Low CLS
Keeping a low CLS (0.1 and below) will be highly advantageous to you for two main reasons. First, you’ll rank higher in Google search results and second, you’ll provide better user experience.
Google’s 28-day Window
You know by now that Google evaluates and ranks your website based on its page performance via Core Web Vitals (CWV), right? Well Google uses a 28-day rolling average score to evaluate LCP, FID (soon to be INP in March 2024), and CLS. Since CLS is a third of what makes up your overall score, a high layout shift will fail your CWV score and fixing it can take up to 28 days before you pass the CWV score again. This costs you money and traffic daily until the changes take effect.
Additionally, websites with layouts that shift a lot drive visitors away and this problem is much worse for those browsing on smartphones. With lots of other sites, users won’t hesitate to jump to the next until they find a smoother experience. This does not just negatively affect your site traffic and retention, but the possibility of actual conversion as well. Users may overlook important content, unintentionally click the wrong options, or checkout prematurely.
Conclusion
Understanding and managing Cumulative Layout Shift (CLS) is essential for optimizing your website’s performance and improving user experience so you can rank higher in search results. Google has included CLS as one of the three key metrics in Core Web Vitals, and it is recommended that you maintain a score 0.1 and below. For monitoring and measuring CLS, you can use readily-available tools such as Chrome DevTools, Lighthouse Reports, PageSpeed Insights, Google Search Console, and JavaScript.
You must continuously keep your CLS in check and immediately address identified issues. Google evaluates your overall Core Web Vitals on a 28-day rolling average, and a poor CLS can make you fail for days.
