What does CLS mean?

Synonyms: Layout stability

CLS stands for Cumulative Layout Shift, and it is a metric that measures the visual stability of a webpage as it loads. Specifically, CLS tracks how much a page’s layout shifts unexpectedly while the content is loading, which can negatively impact the user experience. This is one of Google’s Core Web Vitals, which are critical performance indicators for ensuring a good user experience on a webpage.

A high CLS score indicates that elements on the page, such as images, text, or buttons, shift around as the page loads, potentially causing frustration for users. A low CLS score means the content remains visually stable and predictable, offering a better browsing experience.

Why is CLS Important?

CLS is important because unexpected layout shifts can lead to a poor user experience. For example, if a user tries to click on a button and the page shifts, they might end up clicking on something else by mistake, which could result in frustration or even cause the user to leave the site. A better, more stable layout reduces user frustration and bounce rates, which are important factors in SEO and overall website performance.

Google considers CLS as part of its Page Experience ranking factors, meaning a high CLS score can negatively impact your search engine rankings.

Common Causes of High CLS

Several factors can lead to high Cumulative Layout Shift scores, such as:

1. Images without dimensions: If images do not have specified width and height in the HTML or CSS, the browser cannot allocate space for them while loading. As a result, when the image loads, it can push other content around, causing layout shifts.
2. Ads, embeds, and iframes: Third-party content, like ads or embedded elements, can load late and shift the layout of the surrounding content.
3. Late-loading fonts: Fonts that load after other content may cause text to reflow or resize, which shifts the layout.
4. Dynamically injected content: Pop-ups, banners, or content that appears after the main page loads can cause unexpected shifts.

How to Measure CLS

CLS is measured using a score that is calculated based on how much the layout shifts during the page load. The score ranges from 0 (no shifting) to 1 (significant shifting). A good CLS score should be below 0.1 for optimal user experience.

You can measure CLS using tools like:

• Google PageSpeed Insights: This tool provides a CLS score along with other performance metrics.
• Lighthouse: Available through Chrome’s Developer Tools, Lighthouse audits your site and provides a detailed CLS score.
• Web Vitals Extension: A Chrome extension that tracks all Core Web Vitals, including CLS, in real time.

How CLS is Calculated

The CLS score is based on two factors:

• Impact fraction: How much space an unstable element occupies on the screen relative to the viewport.
• Distance fraction: How far the element moves on the screen.

The formula multiplies these two fractions to determine the CLS score. For example, if an image shifts 25% of the viewport and covers 50% of the screen, the CLS score for that shift would be 0.25 * 0.50 = 0.125.

How to Reduce CLS

To lower your CLS score and improve your site’s visual stability, follow these best practices:

1. Always Set Dimensions for Images and Videos

Ensure that images and video elements have defined width and height attributes in the HTML or CSS. This helps the browser allocate the right amount of space before they fully load, preventing content shifts.

2. Reserve Space for Ads and Embeds

When using ads or embedded content (like iframes), set a reserved space for them in your layout. This way, even if they load later, they won’t cause the surrounding content to move.

3. Optimize Fonts

Use font-display: swap in your CSS to load fonts more efficiently. This prevents the browser from hiding text while the custom font loads, avoiding layout shifts when the font appears.

4. Preload Key Resources

Preload important resources, like fonts and images, so they load faster and more predictably. This reduces the likelihood of shifts as the page loads.

5. Avoid Dynamically Injecting Content Above the Fold

If you need to inject content (like banners or pop-ups), try to place it below the fold or reserve space for it above the fold so that it doesn’t push existing content down unexpectedly.

Ideal CLS Scores

Google provides benchmarks for acceptable CLS scores:

• Good: A CLS score of 0.1 or less.
• Needs improvement: A CLS score between 0.1 and 0.25.
• Poor: A CLS score higher than 0.25.

Keeping your CLS score low ensures a more stable user experience, helping with both user satisfaction and search engine rankings.