CLS(Cumulative Layout Shift)란? | SEO 용어집

CLS(Cumulative Layout Shift)는 페이지가 사용자에게 보이는 동안 예상치 못하게 요소가 얼마나 이동했는지를 수치화한 Core Web Vitals 지표입니다. 사용자가 버튼을 누르려는 순간 화면이 밀려 엉뚱한 것을 눌러버리는 '콘텐츠가 튀는' 문제를 정량화합니다.

왜 중요한가

CLS는 구글이 공식 인정한 랭킹 신호이자 Core Web Vitals 세 축 중 하나입니다. 기준: 좋음 ≤ 0.1, 개선 필요 0.1~0.25, 나쁨 > 0.25. CLS가 높으면 사용자 신뢰가 무너지며, 구글 조사에 따르면 CLS > 0.15인 페이지는 이탈률이 24% 더 높습니다. 원인 대부분이 단순 해결 가능한 항목이라 Core Web Vitals 중 개선 비용이 가장 낮은 지표이기도 합니다.

CLS 계산 방식

CLS 점수 = impact fraction × distance fraction을 페이지 수명 동안의 모든 예상치 못한 레이아웃 이동에 대해 합산합니다.

impact fraction: 이동한 요소가 영향을 준 뷰포트 비율(이동 전·후 영역의 합집합)
distance fraction: 요소가 이동한 최대 거리 / 뷰포트 크기

2021년부터 크롬은 'windowed CLS'를 사용해 최악의 5초 구간만 집계합니다. 덕분에 장수명 SPA가 한 번의 실수로 영구 감점되지 않습니다.

흔한 원인

크기가 지정되지 않은 이미지: <img>에 width·height가 없으면 이미지 로드 시 레이아웃이 재계산됩니다.

공간 예약 없는 광고·임베드: 초기 렌더 후 삽입되는 외부 광고가 아래 콘텐츠를 밀어냅니다.

웹폰트 FOIT/FOUT: 커스텀 폰트가 로드되면 대체 폰트와 글자 크기·폭 차이로 텍스트가 재흐름됩니다.

동적으로 삽입되는 콘텐츠: '추천 글' 위젯, 쿠키 배너, 알림이 기존 콘텐츠 위에 나타나는 경우.

transform이 아닌 속성 애니메이션: top·left 애니메이션은 레이아웃을 트리거합니다. transform은 그렇지 않습니다.

해결 방법

이미지·비디오에 크기 명시: <img width="800" height="600"> — 파일 로드 전에 브라우저가 공간을 예약합니다.

광고 슬롯 공간 예약: 광고 컨테이너에 고정 min-height를 주어 삽입 시 콘텐츠가 밀리지 않게 합니다.

font-display: optional 또는 웹폰트 preload로 FOUT을 최소화합니다.

새 콘텐츠는 기존 콘텐츠 아래에 또는 사용자 인터랙션 후에 삽입합니다.

transform과 opacity로만 애니메이션합니다 — 이 두 속성은 레이아웃을 건드리지 않습니다.

aspect-ratio CSS로 크기가 동적인 반응형 미디어도 공간을 예약합니다.

측정 방법

필드 데이터: CrUX, Search Console Core Web Vitals 리포트, PageSpeed Insights 필드 섹션.

랩 데이터: Lighthouse, Chrome DevTools Performance. 실제 사용자는 다양한 스크롤·인터랙션을 하므로 랩 CLS와 필드 CLS가 달라질 수 있습니다.

CLS는 실제 사용자 데이터의 75백분위수로 랭킹에 반영되므로, SEO 관점에서는 필드 데이터가 기준입니다.

Sources:

inblog에서 활용하기

inblog는 에디터에서 삽입되는 모든 이미지·임베드에 자동으로 크기 정보를 기록하고, 웹폰트 로딩 전략을 자체 최적화해 CLS를 0.1 이하로 유지합니다. 사용자가 HTML·CSS를 직접 만질 필요 없이 기본값만으로 Core Web Vitals CLS 기준을 통과하도록 설계돼 있습니다.

CLS