35 lines
1.2 KiB
Markdown
35 lines
1.2 KiB
Markdown
---
|
|
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 |
|