CLS
cls
뜻과 개념
화면 요소가 예상치 않게 움직이는 정도를 나타내는 지표입니다. 시각적인 안정성을 점검합니다.
어떻게 작동하나요?
CLS는 사용자가 예상하지 못한 화면 배치 이동을 측정하는 Core Web Vitals 지표입니다. 글을 읽던 중 이미지가 늦게 나타나 문단을 밀어 내거나, 버튼을 누르려는 순간 위치가 바뀌는 현상이 대상입니다. 시간 단위가 아니라 이동한 영역과 거리를 바탕으로 계산하는 값이며 낮을수록 시각적으로 안정적입니다.
왜 알아야 하나요?
레이아웃이 흔들리면 독자가 읽던 위치를 잃고 다른 버튼을 잘못 누를 수 있습니다. 문의나 결제처럼 중요한 행동이 있는 화면에서는 단순한 미관을 넘어 사용 오류로 이어집니다. web.dev는 방문의 75% 이상에서 CLS 0.1 이하를 좋은 경험의 기준으로 안내하지만 이 기준을 통과했다고 검색 상위를 보장하지는 않습니다.
실무에서 적용하는 방법
브라우저 성능 도구에서 어떤 요소가 언제 움직이는지 확인합니다. 이미지와 영상에 크기 또는 비율을 지정하고 광고·임베드가 들어올 공간을 미리 확보합니다. 웹폰트 교체로 줄바꿈이 달라지는지 살피고 늦게 삽입하는 안내 배너가 본문을 밀지 않게 설계합니다. 첫 화면뿐 아니라 스크롤과 사용자 행동 이후도 검사하세요.
실무에서는 이렇게 봅니다
백링크 상담 버튼 위에 후기 위젯이 늦게 로딩되면서 버튼이 아래로 밀린다고 가정해 보겠습니다. 위젯에 예상 높이를 예약하거나 처음부터 별도 영역을 마련하면 움직임을 줄일 수 있습니다. 가장 큰 이미지만 압축하는 작업으로는 이 배치 문제를 해결하지 못할 수 있습니다.
주의할 점
개발자 PC의 짧은 테스트에서는 늦게 발생하는 이동을 놓치기 쉽습니다. 실사용 데이터와 재현 가능한 실험을 함께 봐야 합니다. 모든 애니메이션이 CLS로 계산되는 것은 아니지만 지표에 잡히지 않는 움직임도 불편할 수 있으므로 실제 화면 경험을 함께 평가하세요.
자주 묻는 질문
CLS는 페이지가 느리다는 뜻인가요?
시각적 안정성을 측정하므로 속도 지표와 다릅니다. 빠르게 로딩돼도 요소가 움직일 수 있고, 느려도 공간이 예약되어 있으면 안정적일 수 있습니다.
이미지 크기만 지정하면 끝인가요?
광고, 폰트, 동적으로 삽입되는 콘텐츠도 원인이 됩니다. 이동한 요소와 그 요소를 밀어낸 원인을 구분해서 확인해야 같은 문제가 다시 생기지 않습니다.