CLS: What is Cumulative Layout Shift and How to Optimize This Core Web Vitals Metric

What is Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures page shifts that occur while content is being rendered or when new sections are displayed.

These shifts can be highly frustrating for users, causing them to lose their reading spot in an article or accidentally click the wrong button.

CLS calculates a score based on how much of the page moves unexpectedly and how often this occurs and is one of the Core Web Vitals Metrics.

How CLS Is Calculated

CLS is determined using a simple formula:

CLS = Σ (impact fraction * distance fraction)

• The impact fraction measures how much of the visible content on the page shifted.
• The distance fraction measures how far the content moved.

For example, if 50% of the page (how much) shifts by 25% (how far) of the viewport, the CLS score is 0.50 * 0.25 = 0.125.

Expected vs. Unexpected Layout Shifts

Not all layout shifts are negative. For instance, clicking on a “load more” button typically causes more elements to appear on the page, leading to expected shifts.

Only unexpected layout shifts contribute to the CLS score. For example, if a user clicks a button and new content is added (like a dropdown menu), the shift is excluded from the CLS calculation. Layout shifts occurring within 500 milliseconds of user input are also excluded.

Layout Shift Sessions

When CLS was first introduced, some sites were unfairly penalized with high CLS scores, such as pages using infinite scrolling. New content added with each scroll would inflate the total CLS score.

CLS is now calculated in sessions, each lasting five seconds. The session with the highest CLS score becomes the final CLS score.

For example:

• First 5 seconds: CLS = 0.095
• Second 5 seconds: CLS = 0.15
• Third 5 seconds: CLS = 0.00
• The final CLS score is the highest: 0.15.

Identifying CLS Issues

Solving CLS Caused by Images

1. Using Lighthouse in Chrome
   Run a Lighthouse audit directly in your Chrome browser. Right-click on any page area, select “Inspect,” choose the Lighthouse tab, and run the audit. The results will display the CLS score along with diagnostics for identifying layout shifts. However, the tool may lack exact shift distance details.

2. Using the CLS Visualizer Extension
   The CLS Visualizer is a Chrome extension that visually highlights all layout shifts on a page. This tool provides an excellent visual overview of cumulative layout shifts.

3. Using Chrome’s Performance Tab
   Open the Performance tab in Chrome for a more detailed view. Navigate to any page, then:
   

   • 3.1 Press CTRL+Shift+I to open Developer Tools.

   • 3.2 Press CTRL+Shift+E to start profiling and reload the page.

   • 3.3 Hover over the timeline to inspect layout shifts, marked in red under the “Experience” section

Layout shifts from images typically occur when image dimensions are not defined in the HTML <img> tag or CSS styles. The solution is to set proper dimensions:

html<img src="img.jpg" width="200" height="200" alt="Correct dimensions prevent layout shifts">

Use CSS for responsive designs:

cssimg { max-width: 100%; height: auto; }

Alternatively, set dimensions directly in CSS for specific images:

cssimg#my-image { width: 200px; height: 200px; }

Solving CLS Caused by Web Fonts

Web fonts can cause layout shifts as fallback fonts are replaced by downloaded web fonts. To mitigate this:

1. Use a font fallback similar in size and spacing to the final web font.
2. Preload web fonts to minimize delays:
   html <link rel="preload" href="/some-font.woff2" as="font" crossorigin="anonymous">

Solving CLS Caused by Icons

Icon fonts (e.g., Font Awesome) can cause layout shifts if the font file is not loaded in time. Reserve space for icons using CSS:

cssnav .searchicon { width: 64px; height: 64px; }

Solving CLS Caused by AJAX

AJAX content updates can lead to layout shifts if no space is reserved for new content. Estimate the height of the AJAX content and reserve space in advance:

css#ajax { height: 400px; } #ajax.loaded { height: auto; }

Solving CLS Caused by Ads

Ads that load late in the page often contribute to layout shifts. Reserve space for ads in the visible viewport:

css.ad { min-height: 250px; background: #dedede; }
@media only screen and (min-width: 600px) {
.ad { min-height: 90px; }
}

Optimizing Core Web Vitals with Tuurbo

Optimizing Core Web Vitals, including CLS, can be a complex process requiring advanced technical skills. The difficulty varies depending on your site’s structure and technologies used.

To simplify this process, we developed Tuurbo, a tool designed to automatically address these challenges. With Tuurbo, you can improve your CLS and other Core Web Vitals metrics within 48 hours - no extensive development sessions or costly consultations needed.

Explore our guides and discover how Tuurbo can help you achieve a faster, more user-friendly website.

Does it seem like magic?

You don't believe it, do you?! Try it!

Try our solution, enjoy the results, and decide how long to keep your subscription active.