구글 SEO
CLS(누적 레이아웃 이동)
Cumulative Layout Shift 다른 표기: 레이아웃 변경, 화면 밀림
CLS(누적 레이아웃 이동)는 페이지를 보는 동안 화면 요소가 예기치 않게 밀리는 정도를 합산해 점수로 나타내는 코어 웹 바이탈 지표입니다.
- CLS 점수를 이루는 두 가지 계산 요소
- 좋음·개선 필요·나쁨을 가르는 기준값
- CLS를 낮추기 위해 코드에서 먼저 손볼 지점
CLS는 어디에서 쓰이나요?
PageSpeed Insights와 서치콘솔 「핵심 웹 지표」 보고서에서 LCP·INP와 함께 표시됩니다.
- 이미지 로딩 중 화면이 갑자기 밀리는 문제를 확인할 때
- 광고나 위젯이 늦게 삽입돼 본문이 움직이는 원인을 찾을 때
- 코어 웹 바이탈 종합 점수를 개선할 때
CLS는 어떻게 계산하나요?
이동한 요소마다 영향 받는 영역과 이동 거리를 곱해 점수를 만듭니다.
레이아웃 이동 점수 = 영향 받는 영역 비율 × 이동 거리 비율페이지가 열려 있는 동안 발생한 값을 모두 더합니다
- 화면에서 차지하는 비중이 클수록 점수가 커집니다
- 이동 거리가 멀수록 점수가 커집니다
CLS가 왜 중요한가요?
화면이 밀리면 다른 버튼을 잘못 누르기 쉽습니다. 세 구간으로 좋고 나쁨을 가릅니다.
| CLS 값 | 판정 |
|---|---|
| 0.1 이하 | 좋음 |
| 0.1 초과 0.25 이하 | 개선 필요 |
| 0.25 초과 | 나쁨 |
이 기준은 코어 웹 바이탈의 페이지 경험 신호에도 함께 쓰입니다(web.dev).
CLS라는 개념은 왜 생겼나요?
로딩 속도가 빨라도 화면이 계속 움직이면 다루기 어렵습니다. 이미지 크기 미지정, 웹폰트 지연, 광고 삽입 같은 원인을 수치화하기 위해 만들어졌습니다.
내 상황에 적용하려면?
숫자를 넣어 감을 잡아 보겠습니다. 아래는 설명을 위해 가정한 예시입니다.
배너가 화면의 25%를 차지하고 화면 높이의 20%만큼 밀렸다고 하겠습니다. 이때 점수는 0.25 × 0.2로 0.05가 됩니다.
- 이미지·동영상에 width·height 속성으로 크기를 미리 지정했습니다
- 광고·위젯 영역에 최소 높이를 미리 확보했습니다
- 웹폰트 로딩 중 글자 크기가 바뀌지 않는지 확인했습니다
CLS에 대한 흔한 오해는 무엇인가요?
| 오해 | 실제 |
|---|---|
| 스크롤하며 생기는 움직임도 CLS에 잡힙니다 | 직접 스크롤하거나 클릭해서 생긴 움직임은 500밀리초 안이면 제외됩니다 |
| 애니메이션은 전부 CLS를 유발합니다 | transform 속성으로 만든 애니메이션은 레이아웃을 다시 계산하지 않아 CLS에 잡히지 않습니다 |
| 페이지 로딩 초반에만 확인하면 됩니다 | 페이지가 열려 있는 전체 시간 동안의 이동을 누적하므로 스크롤 중간의 광고 삽입도 포함됩니다 |
CLS를 포함한 3가지 지표는 코어 웹 바이탈에서, 로딩 체감 속도는 LCP에서 다룹니다.
자주 묻는 질문
CLS 좋음 기준은 어느 정도인가요?
0.1 이하면 좋음, 0.25를 넘으면 나쁨으로 분류됩니다.
이미지에 크기값을 넣으면 왜 도움이 되나요?
width·height 속성이나 CSS로 비율을 미리 지정하면 브라우저가 로드 전부터 자리를 확보해 뒤에 내용이 밀리지 않습니다.
광고 때문에 CLS가 나빠지면 어떻게 하나요?
광고 영역에 최소 높이를 미리 지정해 로드 전부터 빈 공간을 확보해 두면 줄일 수 있습니다.
참고 자료
이 페이지가 도움이 되었나요?
10초면 됩니다 · 남겨주신 의견은 다음 개정에 반영됩니다