CLS

개요

CLS(Cumulative Layout Shift, 누적 레이아웃 이동)는 페이지가 로드되는 동안 화면에 보이는 요소가 예기치 않게 위치를 바꾼 정도를 누적해 측정하는 시각 안정성 지표입니다. 구글이 정의한 코어 웹 바이탈(Core Web Vitals) 세 가지 지표 중 하나로, 사용자가 버튼을 누르려는 순간 광고나 이미지가 끼어들어 화면이 밀리는 경험처럼 의도하지 않은 레이아웃 이동을 정량화합니다.

web.dev 공식 문서는 CLS를 "페이지의 전체 수명 주기 동안 발생한 모든 예기치 않은 레이아웃 이동 점수 중 가장 큰 버스트(burst)의 합"으로 정의합니다. 하나의 레이아웃 이동 점수는 영향 분율(impact fraction)과 거리 분율(distance fraction)을 곱해 계산되며, 1초 이내 간격으로 연달아 발생한 이동을 묶은 세션 윈도(최대 5초)에서 가장 점수가 높은 구간이 최종 CLS 값이 됩니다.

기준값

CLS 평가는 모바일과 데스크톱 페이지 로드의 75 백분위수를 기준으로 측정합니다.

등급	CLS 점수	의미
좋음	0.1 이하	시각적으로 안정적인 상태
개선 필요	0.1 초과 ~ 0.25 이하	일부 레이아웃 이동 발생
나쁨	0.25 초과	잦은 레이아웃 이동으로 사용 경험 저해

주요 원인

• 크기를 지정하지 않은 이미지: width·height 속성이 없으면 이미지가 로드될 때 공간이 새로 확보되며 주변 콘텐츠가 밀립니다.
• 크기를 지정하지 않은 광고·임베드·iframe: 늦게 로드되는 외부 요소가 주변 콘텐츠를 예기치 않게 밀어냅니다.
• 동적으로 삽입되는 콘텐츠: 초기 렌더링 이후 자바스크립트로 추가된 배너·알림·추천 영역이 기존 콘텐츠를 이동시킵니다.
• 웹폰트 교체: 폴백 폰트와 웹폰트의 크기 차이로 FOIT·FOUT가 발생하면 텍스트가 다시 배치되며 리플로우가 일어납니다.
• 네트워크 응답을 기다리는 동작: 응답이 도착한 뒤 DOM을 갱신하면서 레이아웃이 변동될 수 있습니다.

최적화

• 이미지 크기 명시: <img> 태그에 width·height 속성을 지정하거나 CSS aspect-ratio로 로드 전에 공간을 예약합니다. 반응형은 height: auto; width: 100%; 와 함께 사용합니다.
• 광고·임베드 공간 예약: min-height 또는 aspect-ratio로 늦게 로드되는 슬롯의 자리를 미리 확보합니다.
• 동적 콘텐츠 배치 조정: 삽입 콘텐츠를 뷰포트 아래쪽에 두거나 사용자 상호작용 이후 로드하고, 고정 크기 컨테이너·스켈레톤 UI를 활용합니다.
• 웹폰트 최적화: font-display: optional, 폴백 폰트 명시, size-adjust로 폰트 교체 시 크기 차이를 줄입니다.
• bfcache 적격성 확보: 뒤로·앞으로 탐색 시 페이지 상태를 복원해 리플로우 없는 이동을 보장합니다.

근거

위 기준값과 계산 방식, 원인·최적화 항목은 구글 web.dev의 공식 문서 "Cumulative Layout Shift (CLS)"와 "Optimize CLS"에 근거합니다. 두 문서 모두 좋음 기준을 0.1 이하, 나쁨 기준을 0.25 초과로 명시하며, 레이아웃 이동 점수를 영향 분율 × 거리 분율로 산출하고 1초 간격·최대 5초의 세션 윈도 개념을 제시합니다.

실행 체크리스트

• 모든 이미지·동영상에 width·height 또는 aspect-ratio가 지정돼 있는지 확인합니다.
• 광고·임베드·iframe 슬롯에 min-height로 공간을 예약했는지 점검합니다.
• 동적 삽입 콘텐츠가 기존 콘텐츠를 밀어내지 않는지 검증합니다.
• 웹폰트에 font-display와 폴백·size-adjust 설정을 적용했는지 확인합니다.
• 실측(필드) 데이터 75 백분위수 기준 CLS가 0.1 이하인지 모니터링합니다.

참고·출처

• Cumulative Layout Shift (CLS) — web.dev
• Optimize Cumulative Layout Shift — web.dev