CLS stands for Cumulative Layout Shift and is one of the Core Web Vitals advocated by Google. It is used as a metric for webpage performance and user experience. Among these, “CLS” is particularly noteworthy. However, many may wonder, “What is CLS?”

So, in this article, we’ll delve into what CLS is, why it’s considered an important metric for judging webpage quality, and more.

Overview of CLS

CLS is positioned as one of the Core Web Vitals proposed by Google.

Reference Page: What are Core Web Vitals? Impact on SEO and Improvement Methods

CLS is an abbreviation for “Cumulative Layout Shift,” which means the cumulative layout shift in Japanese. This metric measures the visual stability of a webpage. If the value of this metric is high, it means there is a significant layout shift when loading the page.

You might wonder, “Is it common for layout shifts to occur?” In reality, it’s a possibility for any website.

For example, when a user tries to click on a specific button, the button may shift due to the loading of images or ads, causing the user to unintentionally click on another area.

A low CLS score indicates a high level of user experience. Conversely, if the CLS score is high, it reduces the visibility and operability of the page, leading to a loss of trust from users. Web administrators should pay attention to this metric and manage their websites accordingly.

Reference Page: Cumulative Layout Shift – HubSpot

Measurement Methods of CLS

To improve the user experience of web pages, it’s essential to ensure the stability of page behavior and display. Among these, CLS is a critical metric that indicates how much page elements move unexpectedly. So, how can you accurately measure CLS? Here are three methods.

Method 1: Utilize Google Search Console

You can measure CLS using Google Search Console. The steps are as follows.

Reference Page: What is Google Search Console? Explanation of How to Install and Use Google Search Console

• Sign in to Google Search Console

First, please log in to Google Search Console.

• Select “Core Web Vitals”

Once logged in, select “Core Web Vitals” from the left-hand menu in the dashboard.

• Click the “Open Report” button at the top right

If you want to see more details, click on the “Open Report” button at the top right of the screen.

Here, you’ll see performance data for both mobile and desktop. They are divided into three categories: “Poor,” “Needs Improvement,” and “Good,” allowing you to quickly see the number of pages with issues and good pages.

Utilize this information to understand how comfortably the pages on your site are operating for users, and make improvements as necessary.

Method 2: Using PageSpeed ​​Insights

PageSpeed ​​Insights is a free tool provided by Google that analyzes webpage performance and provides specific suggestions for improvement. You can also use PageSpeed ​​Insights to measure CLS. The steps are as follows.

Reference page: Explaining how to measure and improve page display speed using PageSpeed ​​Insights

• Access PageSpeed ​​Insights in your browser

Start by accessing PageSpeed ​​Insight.

• Enter the URL you want to analyze and click “Analyze”

There’s a field on the screen where you can enter the URL you want to measure. Enter the URL of the page you want to measure and click the “Analyze” button.

• Review the details

Once the analysis results are displayed, you can check the Cumulative Layout Shift value under the “Key Web Metrics Evaluation” section (CLS item in the top right corner of the screen). The CLS value is a number between 0 and 1, where a smaller number indicates better performance.

In general, as long as your result falls within the green area on the number line, you should be fine. Additionally, under the “Diagnose Performance Issues” section, it will suggest specific problematic areas and improvement measures.

Method 3: Measure with Chrome Extension “Web Vitals”

You can measure CLS using the Chrome extension “Web Vitals.” After installing the extension, display the web page you want to measure in your browser. Then, select the “Web Vitals” icon, and the Core Web Vitals metrics will be displayed.

Reasons for Decreased CLS Evaluation

Why does CLS evaluation decrease in the first place? Here, we’ll discuss possible causes in detail. Please consider these if your company’s CLS evaluation is poor.

Lack of size specifications for images and videos

When opening a webpage, the browser displays the content based on the HTML and CSS information provided. Therefore, web administrators need to specify the sizes of images, videos, and other media included on the page. Failure to do so can contribute to worsened CLS.

If media sizes are not specified, the browser cannot accurately determine the space needed to display the media. Consequently, when the media content loads, the browser readjusts the space, causing the page layout to appear jerky and unnatural.

Unspecified sizes for embedded elements and iframes 

Using embedded elements and iframes allows you to incorporate external content into your webpage, such as YouTube videos or Google Maps.

However, if you fail to specify the size (e.g., width and height) for these iframes, the layout may break when the page loads. This can lead to worsened CLS, so it’s essential to ensure that appropriate size specifications are in place.

Insertion of Dynamic Content

Dynamic content refers to elements that are not initially visible when the page is loaded but appear automatically later on. Examples include advertisements or small windows that suddenly appear after opening a webpage.

Inserting or displaying such dynamic content may cause layout or structural issues on the page. While dynamic content is effective for advertising purposes due to its visibility, it’s essential to be cautious as it can worsen CLS.

Loading Web Fonts

Using web fonts may worsen CLS. Web fonts are tools used to display special character designs on websites. For instance, when you want to use fonts tailored to your brand or specific designs on your website, you use web fonts.

However, because these fonts need to be retrieved from the internet when opening a webpage, there may be occasional delays in loading them.

If the loading is delayed, temporary substitution with other fonts (usually those already installed on the device like PCs) may occur. Subsequently, when the web fonts load, the text design may change. This change can alter aspects such as text size, shape, or layout, potentially disrupting the appearance and structure of the webpage.

Improving CLS

If your CLS evaluation is poor, what measures can you take to address it? Many CLS issues can be resolved by implementing appropriate solutions. Here, we’ll discuss methods for effective improvement.

Specifying Image and Video Sizes

When designing web pages, it’s crucial to pre-determine and set the amount of space allocated for images, videos, advertisements, etc. This practice contributes to improving CLS. Specifically, specify numerical values such as “display this image with a width of 300 pixels and a height of 200 pixels.” This ensures that the image occupies exactly that size of space when displayed. Use HTML or CSS to specify sizes that fit your company’s webpage.

For instance, if specifying image sizes in HTML, use the width and height attributes within the <img> tag.

Sample

<img src=”image URL” width=”300″ height=”200″ alt=”description”> 

Specifying Embedded Elements and iframe Sizes

When displaying external content (e.g., YouTube videos or Google Maps) on your company’s website, you may use “embedded elements” or “iframes.”

When using these elements, it’s essential to pre-set how large the content will appear (width and height). Specifically, you’ll use the “width” and “height” attributes within the HTML or CSS code to specify the size.

For example, if you want to load a certain video with an iframe and display it with dimensions of “width 400 pixels, height 300 pixels,” you’d set it up as follows.

Sample

<iframe width=”400″ height=”300″ src=”https://www.youtube.com/embed/videoID” frameborder=”0″ allowfullscreen></iframe>

Optimizing Dynamic Content

To ensure that elements added dynamically after the page has loaded do not disrupt the page layout, adjust their size and position. Here are two specific methods.

• Pre-allocating Space

This method is akin to clearing space beforehand for content added later to the page. It’s like leaving space in a room for new furniture you’ll add later.

For instance, you pre-determine and allocate space for where ads will appear (e.g., width and height), ensuring a smooth display without affecting other parts of the page when the ads are shown.

• Displaying in Unobtrusive Locations for Users

Elements like pop-ups or notifications require careful placement to avoid obscuring essential information. Therefore, display dynamic content not in prominent areas like the center or top of the page but rather at the bottom or in a sidebar. This ensures a smoother browsing experience for users.

Preloading Fonts

When using web fonts, typically, they need to be downloaded from the internet, which can take time. During this download, the page may not display or may temporarily change the appearance of text.

To mitigate this, you can use preloading techniques to download necessary fonts before displaying the page. By using the “<link>” tag with the “rel=”preload”” attribute, you can preload fonts, reducing wait times and ensuring smooth text display when the page loads.

Common Questions about CLS

Here, we address some common questions about CLS (Cumulative Layout Shift) that we often receive and provide explanations.

Q: How does a high CLS value affect UX?

Answer: A high CLS value can have several negative impacts on user experience. Firstly, unexpected movements of page elements may confuse users and lead to frustration. Moreover, sudden movements of elements like buttons that users intend to click can increase misoperations. Such experiences erode trust from users, leading to increased website abandonment rates and decreased conversion rates.

Q: Why do mobile devices tend to have higher CLS values ​​than desktop?

Answer: Mobile sites have smaller screen sizes, so even minor changes in content positioning are perceived by users as significant visual shifts. Additionally, frequent layout changes due to scrolling can affect CLS by causing delays in content loading.

Q: What roles do developers and designers play in CLS mitigation?

Answer: In addressing CLS issues, developers and designers play crucial roles from their respective perspectives in maintaining appropriate content positioning. Designers should avoid resizing during layout design, while developers need to be creative in minimizing CLS through the use of CSS and JavaScript during implementation. Successful CLS mitigation requires mutual understanding and collaboration between developers and designers.

Summary

In this discussion, we’ve emphasized the importance of CLS. CLS serves as a crucial metric in providing users with a comfortable browsing experience without stress. Lower CLS values ​​enable users to view content smoothly. As web professionals, aim to reduce CLS values ​​and improve user experience. Promptly address high CLS values ​​through actions such as specifying content sizes, as discussed here. Achieving a CLS of 0 (zero CLS) may be challenging, but continuous improvement efforts can keep CLS values ​​within recommended ranges. Use this article as a reference to guide your efforts.

Top of Form

Author Profile

International Web Consultant Paveena Suphawet

A trilingual professional in English, Thai, and Japanese, she has numerous achievements in international SEO. She studied the latest IT technologies at Assumption International University, Thailand, and majored in International Business at the University of Greenwich, UK. Following her tenure at ExxonMobil’s Thai branch, she became a key member of Admano from its establishment.

Return to the top of Japan SEO