CLS (Cumulative Layout Shift)

Definition

CLS (Cumulative Layout Shift) is the cumulative score of unexpected layout shifts that occur during page loading. It quantifies the phenomenon where content position suddenly moves while the user is viewing the page.

It is one of three Google Core Web Vitals metrics and measures visual stability. See Core Web Vitals for more detail.

Summary

CLS thresholds: 0.1 or below = good / 0.1–0.25 = needs improvement / above 0.25 = poor. Adding HTML width/height attributes to images alone often resolves more than half of CLS issues. Reserving space for ads and applying font-display: swap for web fonts are the other main improvement points.

How CLS Is Calculated

The CLS score is not simply a count of occurrences; it reflects the impact of each shift.

Formula

Each layout shift score = Impact Fraction × Distance Fraction

Impact Fraction: The ratio of the combined screen area occupied by the element before and after the move
Distance Fraction: Maximum distance the element moved / viewport size

Accumulation Method

CLS is the sum of all layout shift scores. In a 2021 update, non-contiguous shift sessions (gaps of 1 second or more) are calculated as separate sessions and the maximum value is taken. This addressed the problem where long sessions during scrolling were excessively penalized.

CLS Recommended Thresholds (Google)

[COMPARISON_TABLE: CLS score evaluation]

Rating	CLS Score
Good	0.1 or below
Needs Improvement	0.1 – 0.25
Poor	Above 0.25

Core Web Vitals pass condition: the 75th percentile user’s CLS must be 0.1 or below. In other words, 75% of all visitors must experience 0.1 or below to "pass."

5 Main Causes of CLS

Cause 1: Missing Dimensions on Images and Video

The most common cause. Without HTML width and height attributes, the browser cannot reserve space before the image loads, so when the image loads it pushes existing content downward.

<!-- Bad: no dimensions -->
<img src="hero.jpg" alt="..." />

<!-- Good: dimensions specified -->
<img src="hero.jpg" width="1200" height="630" alt="..." />

Specifying aspect-ratio in CSS is also effective.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Cause 2: Dynamic Content Insertion (Ads, Embeds, iframe)

Ad networks or third-party content loading asynchronously and pushing existing content. Solution: reserve space in advance with min-height on ad slots.

.ad-slot {
  min-height: 250px; /* expected ad size */
}

Cause 3: Delayed Web Font Loading (FOIT/FOUT)

When text size changes during the switch from system font to web font, layout shifts occur.

FOIT (Flash of Invisible Text): Text is invisible while the font loads
FOUT (Flash of Unstyled Text): System font displays first, then is replaced

Solution:

@font-face {
  font-display: optional; /* or swap */
}

font-display: optional keeps using the system font if the web font does not load immediately, eliminating shift.

Cause 4: Dynamic Elements Inserted at the Top of the Screen

Cookie consent banners, app install prompts, notification bars, etc. appearing at the top of the page push all content below downward. Reserve space from the start or use fixed positioning (position: fixed).

Cause 5: Asynchronous JavaScript Content Insertion

Elements rendered late by JS pushing existing elements. See JavaScript SEO for details.

7 Ways to Improve CLS

1. Specify width/height on All Images

Modern CSS automatically converts HTML width/height attributes to aspect-ratio, reserving space even for responsive images.

2. Pre-reserve Space for Ads and Embeds

.ad-container {
  min-height: 90px; /* standard banner ad height */
  display: flex;
  align-items: center;
}

3. Optimize Web Fonts

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Combine font preload with font-display: optional or swap to minimize FOUT.

4. Show Dynamic Content After User Action

Instead of inserting content automatically, design it to appear after user actions such as button clicks or scroll triggers. Layout shifts caused by user actions are not included in CLS.

5. Use CSS transform

When moving elements, use transform: translate() instead of top, left, or margin. transform is handled on a separate layer from the layout layer and does not trigger CLS.

6. Use the contain Property

.ad-slot {
  contain: layout;
}

CSS contain: layout isolates internal changes so they do not affect external layout.

7. Diagnose Shift Causes with Chrome DevTools

Chrome DevTools → Performance tab → start recording → load page → check Layout Shift events. You can visually identify which elements cause shifts.

CLS Measurement Tools

PageSpeed Insights

Enter a URL at pagespeed.web.dev to get both CrUX-based real-user CLS and lab CLS. CrUX data requires at least 28 days of real user data.

Google Search Console (GSC)

GSC → Experience → Core Web Vitals report shows site-wide CLS status by URL. Prioritize URLs in "Poor" or "Needs Improvement" status. See Google Search Console for details.

Web Vitals Chrome Extension

Browser extension for real-time CLS measurement. Immediately see when CLS occurs in actual browsing.

Lighthouse

Chrome DevTools → Lighthouse tab measures lab CLS. It may differ from real user data but provides instant improvement feedback.

CLS and SEO Rankings

Google officially introduced Core Web Vitals as a ranking signal in June 2021. CLS is included as one of the three metrics.

Google’s official stance: Content quality takes priority over page experience (including CLS). When two pages have the same content quality, the page with lower CLS has an advantage.

In practice, CLS alone has limited direct impact, but sites with poor CLS tend to have higher bounce rates, which can indirectly affect user signals.

Korea Market Application

Common CLS Causes on Korean Sites

Ad insertion: Naver Adpost, Google AdSense, and Kakao Adfit load ads asynchronously and are leading causes of CLS. Enable space reservation options provided by each ad SDK.

Korean web fonts: Pretendard, Noto Sans KR, and Nanum Gothic have large file sizes. Using font-display: optional to serve system fonts on first visit and apply web fonts after caching is effective for minimizing CLS.

Cafe24 auto banners: Event banners or coupon bars automatically inserted in Cafe24 smart stores can trigger CLS. Modify theme CSS to reserve space in advance.

Frequently Asked Questions

Q. My CLS is 0.15 — how much do I need to improve?
A. It is 0.05 above the Core Web Vitals pass threshold (0.1 or below). First apply width/height to images across the entire page, then check the "CLS improvement opportunities" section in PageSpeed Insights. These two steps often bring CLS below 0.1.

Q. Why are mobile and desktop CLS different?
A. Different screen sizes produce different layouts, so CLS patterns differ. Google evaluates mobile and desktop separately. Mobile-only CLS is often caused by mobile-only ads or mobile header banners.

Q. Are layout shifts caused by user clicks included in CLS?
A. No. CLS measures only unexpected layout shifts. Shifts from intended interactions such as opening an accordion or switching tabs after a button click are excluded from CLS.

Q. Can I improve CLS when using iframe ads?
A. Yes. Specifying iframe width and height or applying CSS aspect-ratio reserves space before the iframe loads. If the ad platform does not guarantee fixed-size ads, set min-height to secure minimum space.

Q. If CLS is poor but content is good, does ranking stay unaffected?
A. Google’s official stance prioritizes content quality. However, poor CLS (0.25 or above) causes user bounce and directly harms UX such as clicking the wrong area. Since user experience affects site trust over time, CLS improvement is recommended regardless of SEO.

Related Sources

web.dev (2024). Cumulative Layout Shift (CLS). https://web.dev/articles/cls
web.dev (2024). Optimize Cumulative Layout Shift. https://web.dev/articles/optimize-cls
Google Search Central (2021). Evaluating page experience for a better web. https://developers.google.com/search/blog/2020/05/evaluating-page-experience