---
id: wiki-2026-0508-cumulative-layout-shift-cls
title: Cumulative Layout Shift (CLS)
category: 10_Wiki/Topics
status: duplicate
canonical_id: core-web-vitals
duplicate_of: "[[Core-Web-Vitals]]"
aliases: [cls, layout-shift]
source_trust_level: A
confidence_score: 0.9
verification_status: redirected
tags: [duplicate, performance, web-vitals]
last_reinforced: 2026-05-10
github_commit: pending
---

# Cumulative Layout Shift (CLS)

> **이 문서는 [[Core-Web-Vitals]] 의 중복본입니다.** Canonical 문서로 redirect.

## 핵심 요약 (specialization aspects)
- CLS 는 매 Core Web Vitals 의 stability metric — visible element 가 unexpectedly shift 한 amount 의 sum.
- 매 target: CLS < 0.1 (good), < 0.25 (needs improvement).
- 매 common causes: 매 image without dimensions, 매 ads/iframes, 매 web font swap (FOUT/FOIT), 매 dynamically injected content above fold.
- 매 fix: `width`/`height` attributes, `aspect-ratio` CSS, `font-display: optional`, `min-height` placeholders, CSS `content-visibility`.

## 🔗 Graph
- 부모: [[Core-Web-Vitals]] (canonical)

## 🕓 변경 이력
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | 중복 처리 — canonical 문서로 redirect |